如何在Jquery中选中复选框时收听

Question

我需要知道何时检查页面上的任何复选框:

例如

<input type="checkbox">

我在Jquery中尝试过这个

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

但它没有用,有什么想法吗？

Answer 1

使用change()事件和is()测试:

$('input:checkbox').change(
    function(){
        if ($(this).is(':checked')) {
            alert('checked');
        }
    });

我已经将上面的内容更新到了下面,因为我对ifDOM属性的愚蠢依赖(在)中,当DOM属性同样合适时,使用起来也更便宜.此外,选择器已更改,以便允许在支持它的浏览器中将其传递给DOM的document.querySelectorAll()方法:

$('input[type=checkbox]').change(
    function(){
        if (this.checked) {
            alert('checked');
        }
    });

为了完成,在纯JavaScript中也可以轻松实现相同的功能:

var checkboxes = document.querySelectorAll('input[type=checkbox]'),
    checkboxArray = Array.from( checkboxes );

function confirmCheck() {
  if (this.checked) {
    alert('checked');
  }
}

checkboxArray.forEach(function(checkbox) {
  checkbox.addEventListener('change', confirmCheck);
});

参考文献:

• JavaScript的:
  • Array.from().
  • Array.prototype.forEach().
  • document.querySelectorAll().
  • EventTarget.addEventListener().
• jQuery的:
  • :checked.
  • change().
  • is().

Answer 2

$('input:checkbox').live('change', function(){
    if($(this).is(':checked')){
        alert('checked');
    } else {
        alert('un-checked');
    }
});

jsfiddle:http://jsfiddle.net/7Zg3x/1/

Answer 3

$('input:checkbox').change(function(){
    if($(this).is(':checked')){
        alert('Checked');
    }
});

这是一个演示

Answer 4

如果你想使用 .on 这有效

 jQuery('input[type=checkbox]').on('change', function() {
   if (this.checked) {
     console.log('checked');
   }
 });