如何判断复选框是否被选中？

Question

我有一个用于多个输入的绑定。

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() {
   // do something here
   // do something extra here if $(this) was actually clicked
});

由于还有其他方式来启动输入更改（例如jquery的.change()方法），那么有没有办法判断是通过单击复选框来引起更改事件的呢？

我尝试使用focus，但是focus事件在复选框的更改事件之前触发，因此无效。

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() {
   // do something here
   if($(this).is(":focus")) // do something extra here but focus doesn't happen here for checkboxes.
});

编辑 #1

很抱歉，我不知道如何更进一步澄清这个问题...我不在意复选框是否被选中...我知道.is(":checked")是什么以及如何使用它。但是在这里并没有帮助。我只想知道复选框是否被单击以触发更改事件。

编辑 #2

我有一个解决方法...我首先绑定了输入和选择的点击事件，并存储元素的ID。然后在我的更改绑定中，我检查更改的元素是否是上次单击的相同元素。

$("input, select").click(function() {
    var myId = $(this).attr("id");
    lastClickedStore.lastClicked = myId;
});

然后在更改绑定中，我只需检查当前ID是否等于上次点击的ID。

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() {
   // do something
   if(lastClickedStore.lastClicked == $(this).attr("id")) // do something else.
}

- kasdega

---

也许$(this.id)可以帮助您识别它。请检查我的编辑答案。如果我重复了，请原谅。 - zequinha-bsb

Answer 1

绑定 click 而非 change。当使用键盘改变复选框的状态时，click 事件仍然会被触发，但是此时 event.pageX 和 event.pageY 将为 0，因此您可以这样编写：

$("#foo, #bar, #fooCheckbox, #barCheckBox").click(function(event) {
    // Do something here...
    if (event.pageX > 0) {
        // Check box was clicked, do something extra here...
    }
});

- Frédéric Hamidi

---

有趣...但它并不能完全满足我的需求。"change"绑定是有原因的。在这种情况下，点击并不意味着每次都会改变，特别是当#foo是一个选择框时。然而，所有这些都说了，关于pageX的想法非常好，我将不得不加以利用。 - kasdega

Answer 2

Frédéric Hamidi的回答很好。但是，如果您想以编程方式触发“change”事件，则他的代码不幸地无法工作。如果您确实想要所描述的内容，请尝试此版本：

$('#foo, #bar').bind({
    click: function () {
        alert('click ' + this.id);
        if ($(this).hasClass('changed')) {
            alert('click+change ' + this.id);
            $(this).removeClass('changed');
        }
    },
    change: function () {
        alert('change ' + this.id);
        $(this).addClass('changed');
    }
});

演示。

- Microfed

Answer 3

你可以试着这样做：

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("click", function() {
   // 在这里执行某些操作
   if($(this).is(":checked")) // 对于复选框，此处并不会触发 focus 事件，但是可以在这里增加其他一些操作。
});

希望能对你有所帮助。

- Sudhir Bastakoti

Answer 4

如果 ($(this).is(':checked'))....

如果 ($(this).attr('checked')) ...

编辑：此外，如果所有复选框都属于“家庭”，请确保只能选择一个，定义name=the-same-for-all-items和id=different ones for each item。

Ex:

<input type='checkbox' name='fruits' id='orange' >orange
<input type='checkbox' name='fruits' id='melon' >melon
<input type='checkbox' name='fruits' id='banana' >banana
<input type='checkbox' name='fruits' id='apple' >apple   
<input type='checkbox' name='fruits' id='...' >....

EDIT: if it was clicked: the id?

console.log($(this.id));

- zequinha-bsb

---

也许我需要澄清一下我的问题...我完全不在乎复选框是否被选中。我关心的是它是否被点击以触发更改事件。 - kasdega

Answer 5

所以这是我解决这个问题的方法。我首先绑定输入和选择的点击事件，并存储元素的ID。然后在我的更改绑定中，我检查更改的元素是否与上次单击的元素相同。

$("input, select").click(function() {
    var myId = $(this).attr("id");
    lastClickedStore.lastClicked = myId;
});

然后在更改绑定时，我只需检查当前ID是否等于上次单击的ID。

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() {
   // do something
   if(lastClickedStore.lastClicked == $(this).attr("id")) // do something else.
}

- kasdega

Answer 6

试试这个：

<input type="checkbox" onClick="doSomething()">

  or

$("#foo","#bar","#fooCheckbox","#barCheckBox").click(function(){
    doSomething();
});

- Derek 朕會功夫