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

Question

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

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

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

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

原文由 AnonyMouse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

编辑（见评论）

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

 $(":checkbox")

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

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

原文由 James Allardice 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 // $(<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>

原文由 applecrusher 发布，翻译遵循 CC BY-SA 4.0 许可协议