javascript - jQuery 复选框选中状态更改事件

Question

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

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

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

我认为必须有一个更干净的 jQuery 方式。有人知道解决办法吗？

Answer 1

绑定(bind)到 change 事件而不是 click。但是，您可能仍需要检查复选框是否被选中:

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

与 click 事件相比，绑定(bind)到 change 事件的主要好处是，并非所有对复选框的点击都会导致它改变状态。如果您只想捕获导致复选框更改状态的事件，则需要恰当命名的 change 事件。 在评论中编辑

还要注意，我使用 this.checked 而不是将元素包装在 jQuery 对象中并使用 jQuery 方法，仅仅是因为直接访问 DOM 元素的属性更短、更快。

编辑(见评论)

要获得所有复选框，您有几个选项。您可以使用 :checkbox伪选择器:

$(":checkbox")

或者您可以使用 attribute equals选择器:

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