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

Question

当选中/取消选中复选框时,我希望事件触发客户端:

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

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

我认为必须有一个更清晰的jQuery方式.有人知道解决方案吗？

Answer 1

绑定到change事件而不是click.但是,您可能仍需要检查复选框是否已选中:

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

在change事件上绑定事件的主要好处click是,并非所有单击复选框都会导致它更改状态.如果您只想捕获导致复选框更改状态的事件,则需要使用恰当命名的change事件. 在评论中编辑

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

编辑(见评论)

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

$(":checkbox")

或者您可以使用属性equals selector:

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

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>

Answer 3

只是另一个解决方

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

Answer 4

如果您打算仅在已选中的复选框上附加事件(因此在取消选中并稍后再次检查时会触发),那么这就是您想要的.

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

    })
})

如果您打算将事件附加到所有复选框(已选中和未选中)

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

    })
})

如果你想要它只在被检查时(从未选中)开始,那么@James Allardice会在上面回答.

BTW input[type='checkbox']:checked是CSS选择器.

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');
    }
});

问候！

Answer 6

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

Answer 7

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

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

Answer 8

也可以如下实现。当复选框被触发时，带有 #checkbox id 的 div 或控件将被隐藏或以其他方式显示。

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