Javascript jQuery复选框选中状态已更改事件

我希望在选中/取消选中复选框时触发客户端事件：

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

基本上，我希望它发生在页面上的每个复选框。这种点击触发并检查状态的方法可以吗

---

我想一定有一种更干净的jQuery方法。有人知道解决方案吗？

绑定到

更改

事件，而不是

单击

。但是，您可能仍需要检查复选框是否已选中：

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

绑定到

change

事件而不是

click

事件的主要好处是，并不是所有单击复选框都会导致其更改状态。如果您只想捕获导致复选框更改状态的事件，则需要适当命名的

change

事件。在评论中编辑

还要注意，我使用了

this.checked

而不是将元素包装在jQuery对象中并使用jQuery方法，这仅仅是因为直接访问DOM元素的属性更短更快

编辑（见评论）

要获取所有复选框，您有两个选项。您可以使用伪选择器：

$(":checkbox")

$("input[type='checkbox']")

或者您可以使用选择器：

$("input[type='checkbox']")

---

如果您的意图是仅在选中的复选框上附加事件（这样，当它们被选中并在以后再次选中时，它将触发），那么这就是您想要的

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

如果您打算将事件附加到所有复选框（选中和未选中）

如果你想让它只在他们被检查的时候发射（从未检查），那么@James Allardice回答上面的问题

---

顺便说一句，输入[type='checkbox']：选中的是CSS选择器。

如果您动态添加复选框，则上面的正确选项将不起作用。您需要利用这一点，它允许父节点从特定子代捕获冒泡事件并发出回调

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

标题1
标题2

这只是另一种解决方案

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

---

也许这是你的另一种选择

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

`

基于事件采取的操作（单击事件）

没有基于当前状态采取操作的事件

---

试试这个jQuery验证

$（文档）.ready（函数（）{
$（'#myform'）。验证（{//初始化插件
规则：{
同意：{
必填项：true
}
},
submitHandler:函数（表单）{
警报（“提交的有效表格”）；
返回false；
}
});
});



我已阅读并同意
同意
这是要查找复选框是否选中的解决方案。
使用#prop（）函数//

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

非常简单，这是我使用的方式：

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

问候
 试试这种“html方法”，它是


功能味精（动物，is）{
console.log（动物，is.checked）；//做一些事情
}
你有狗吗

你有青蛙吗？

…
实际上，我在类中查找复选框。有没有更好的方法可以不分等级直接获取所有复选框？@AnonyMouse-请参阅我的编辑。有两种方法可以做到这一点。@Vigrond-实际上，单击标签会触发关联控件上的单击事件：这比
$（This）.is（':checked'）
干净得多。我原以为如果要检测键盘上的更改（制表符、空格键），就必须使用
change
事件，但令人惊讶的是，
click
也会检测非鼠标单击引起的更改，不确定这是否是jQuery事件，请注意：绑定任何事件
click
，
更改
或页面上所有复选框的任何内容都可能导致性能问题（取决于复选框的数量）。尝试绑定到父元素或文档并捕获冒泡事件，即（'change'，'：checkbox'，function（）{//stuff}）

如果stackoverflow中存在同一问题，是否需要再次问这个问题@如果我不认为它们是重复的，因为链接的问题是关于获取复选框的状态，而这个问题是关于选中的事件。我总是要搜索这个选中的属性，有很多方法可以实现这一点，而这段代码可能会回答这个问题，提供有关此代码为什么和/或如何回答此问题的其他上下文可提高其长期价值。如果您只想查找未选中的复选框，该怎么办？我对所有选中的$都有这个（“#tableusnew tbody tr td[id=td1]：checkbox:checked”）；但我不知道如何找到所有未选中的。@FrenkyB请尝试以下操作：

$（“输入[type='checkbox']：未（：选中）”）

单击事件在这种情况下不起作用。“改变”很有效，太神奇了。我刚刚了解了更多的基本知识。这解释了为什么我的点击事件不起作用-谢谢！！

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});