当复选框被选中/取消选中时，我想要一个事件来触发客户端：
$('.checkbox').click(function() {
if ($(this).is(':checked')) {
// Do stuff
}
});
基本上我希望它发生在页面上的每个复选框中。这种点击触发并检查状态的方法好吗？
我认为必须有一种更清洁的 jQuery 方式。有谁知道解决办法？
jQuery复选框选中状态改变事件
IT技术
javascript
jquery
event-handling
2021-02-06 09:04:33
6个回答
绑定到change事件而不是click. 但是，您可能仍需要检查是否选中了复选框：
$(".checkbox").change(function() {
if(this.checked) {
//Do stuff
}
});
绑定到 在评论中编辑change事件click而不是事件的主要好处是并非所有单击复选框都会导致其更改状态。如果您只想捕获导致复选框更改状态的事件，则需要恰当命名的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
}
})
如果您的意图是仅在选中的复选框上附加事件（因此当它们被取消选中并稍后再次选中时会触发），那么这就是您想要的。
$(function() {
$("input[type='checkbox']:checked").change(function() {
})
})
如果您打算将事件附加到所有复选框（选中和未选中）
$(function() {
$("input[type='checkbox']").change(function() {
})
})
如果您希望它仅在它们被检查（从未检查）时触发，那么@James Allardice 在上面回答。
BTWinput[type='checkbox']:checked是 CSS 选择器。
$(document).ready(function () {
$(document).on('change', 'input[Id="chkproperty"]', function (e) {
alert($(this).val());
});
});
其它你可能感兴趣的问题