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

Question

当复选框被选中/取消选中时，我希望在客户端触发一个事件：

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

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

我认为必须有一种更简洁的jQuery方式。有人知道解决方案吗？

- AnonyMouse

---

@Arif，我认为它们并不是重复的，因为链接的问题是关于获取复选框状态的，而这个问题是关于已选事件的。 - Rachel

我总是不得不搜索这个已检查的属性，有许多方法可以实现这一点如此写在这里。 - user3199690

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

---

@AnonyMouse - 看看我的修改。有几种方法可以实现它。 - James Allardice

实际上，点击标签确实会触发关联控件的点击事件：http://jsfiddle.net/ZFG84/ - James Allardice

这比 $(this).is(':checked') 更加简洁。我原本以为如果要检测来自键盘（如按 tab 键、空格键）的更改，必须使用 change 事件，但令人惊讶的是，click 事件也可以检测到非鼠标点击引起的更改。不确定这是否与 jQuery 有关，参考链接：http://jsfiddle.net/mendesjuan/E39sz/。 - Ruan Mendes

请注意：将任何事件（如 click、change 等）绑定到页面上的所有复选框可能会导致性能问题（取决于复选框数量）。请尝试将其绑定到父元素或文档，并捕获冒泡事件，例如使用 $('form').on('change', ':checkbox', function(){ //stuff });。 - hitautodestruct

这对我没有起作用。我将IF块更改为if($(this).is(':checked')){ //Do stuff }然后它就起作用了。 - Lal

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

---

太棒了。我刚刚在这里理解了更多的基础知识。 - jDelforge

这解释了为什么我的点击事件没有起作用 - 谢谢！ - SukieC

注意：对于父元素（在上面的示例中为：#post-list），您必须使用未被动态创建的文档元素。在我的情况下，这是包含部分视图的 div 元素。 - midohioboarder

Answer 3

只是另一种解决方案

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

- Siddhartha Chowdhury

---

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外背景信息将有助于提高其长期价值。 - JAL

Answer 4

如果您的意图是仅在选中复选框时附加事件（因此当它们被取消选中并再次选中时将触发事件），那么这就是您想要的。

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

    })
})

如果您的意图是将事件附加到所有复选框（包括已选和未选）

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

    })
})

如果你希望它只在被选中时触发（从未选中），那么请参考@James Allardice上面的回答。

顺便说一下，input[type='checkbox']:checked是CSS选择器。

- Matas Vaitkevicius

---

如果您只想查找未选中的复选框怎么办？我已经有了所有选中的这个：$（“#tableUSNW tbody tr td [id = td1]：checkbox：checked”）;但我不知道如何找到所有未选中的。 - FrenkyB

@FrenkyB 请尝试以下代码：$("input[type='checkbox']:not(:checked)")。 - Matas Vaitkevicius

Answer 5

很简单，这是我使用的方法：

JQuery：

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

问候！

- Radames E. Hernandez

Answer 6

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

- Burhan Kaya

Answer 7

这是查找复选框是否被选中的解决方案。 使用 #prop() 函数//

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

- Shan

Answer 8

以下也可以实现相同的效果。当复选框被选中时，具有#checkbox ID的div或控件将被隐藏或显示出来。

 <script>
      $('#checkbox').on('click',function(){
          if(this.checked){
              $('#checkbox').hide();
           }else{
              $('#checkbox').show();
           }
      });
 </script>

- Lawrence E Bosumbe

Answer 9

试试这个“html方法”，它适用于小型JS项目，可行

function msg(animal,is) {
  console.log(animal, is.checked);   // Do stuff
}

<input type="checkbox" oninput="msg('dog', this)" />Do you have a dog? <br>
<input type="checkbox" oninput="msg('frog',this)" />Do you have a frog?<br>
...

- Kamil Kiełczewski

Answer 10

基于事件的操作（点击事件）。

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

不基于当前状态采取行动。

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

- Hasib Kamal Chowdhury

---

在这种情况下，“click”事件不起作用。“change”可以使用。 - Mehmood Memon