jQuerycheckbox选中状态更改事件

当checkbox被选中/取消选中时，我想要一个事件触发客户端：

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

基本上我希望它发生在页面上的每个checkbox。 这种点击并检查状态的方法是否正确？

我在想，必须有一个更清洁的jQuery方式。 任何人都知道解决scheme

Answer 1

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

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

通过click事件绑定到change事件的主要好处是，不是所有点击checkbox都会导致它改变状态。 如果您只想捕获导致checkbox更改状态的事件，则需要命名适当的change事件。 编辑评论

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

编辑 （请参阅评论）

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

 $(":checkbox") 

或者你可以使用一个属性等于select器：

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

Answer 2

为了将来有任何人在这里遇到困难，如果你是dynamic添加checkbox，上面的正确答案将不起作用。 您需要利用事件委托 ，允许父节点捕获来自特定后代的冒泡事件并发出callback。

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

请注意，对于父select器使用document几乎总是不必要的。 相反，select一个更具体的父节点来防止事件传播太多级别。

以下示例显示dynamic添加的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> 

Answer 3

另一个解决scheme

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

Answer 4

如果你的意图是只附加事件选中checkbox（所以它会触发，当他们没有选中，并再次检查），那么这就是你想要的。

 $(function() { $("input[type='checkbox']:checked").change(function() { }) }) 

如果您的意图是将事件附加到所有checkbox（选中和未选中）

 $(function() { $("input[type='checkbox']").change(function() { }) }) 

如果你想让它只在被检查的时候触发（从未选中），@James Allardice回答上面的问题。

BTW input[type='checkbox']:checked是CSSselect器。

Answer 5

也许这可能是你的另一种select。

 <input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />` 

Answer 6

 $(document).ready(function () { $(document).on('change', 'input[Id="chkproperty"]', function (e) { alert($(this).val()); }); });