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

我希望一个事件在选中 / 未选中复选框时触发客户端：

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

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

我在想必须有一种更清洁的 jQuery 方式。有人知道解决方案吗？

答案

绑定到change事件，而不是click 。但是，您可能仍然需要检查是否已选中该复选框：

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

与click事件相比，绑定到change事件的主要好处是，并非复选框上的所有单击都会导致其更改状态。如果只想捕获导致复选框更改状态的事件，则需要适当命名的change事件。删除评论

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

编辑（请参阅评论）

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

$(":checkbox")

或者，您可以使用属性等于选择器：

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

为了将来对此处遇到困难的任何人提供参考，如果您动态添加复选框，则上面的正确接受的答案将不起作用。您将需要利用事件委托，它允许父节点从特定后代捕获冒泡事件并发出回调。

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

请注意，几乎没有必要将document用作父选择器。而是选择一个更特定的父节点，以防止将事件传播到太多级别。

以下示例显示了动态添加的 dom 节点的事件如何不触发先前定义的侦听器。

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

尽管此示例显示了事件委托的用法，以捕获特定节点（ h1 ）的事件，并为此类事件发出回调。

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

只是另一个解决方案

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