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>另一个解决方案
$('.checkbox_class').on('change', function(){ // on change of state
if(this.checked) // if changed state is "CHECKED"
{
// do the magic here
}
})