捕获复选框的选中更改事件答案

【问题标题】：Catch checked change event of a checkbox捕获复选框的选中更改事件
【发布时间】：2010-11-30 03:00:45
【问题描述】：

如何使用 jQuery 捕捉 <input type="checkbox" /> 的选中/取消选中事件？

【问题讨论】：

如果您使用的是相对较新版本的 JQuery，我会使用 .on('change', function(){...}) ，如下面的@Daniel De Leon 的回答中所述。一个优点是，“on”事件监听器将绑定到动态生成的 html。

【解决方案1】：

<input type="checkbox" id="something" />

$("#something").click( function(){
   if( $(this).is(':checked') ) alert("checked");
});

编辑：当复选框因单击以外的其他原因（例如使用键盘）而更改时，这样做不会捕获。为避免此问题，请收听 change 而不是 click。

要以编程方式检查/取消检查，请查看Why isn't my checkbox change event triggered?

【讨论】：

document.getElementById('something').checked 有效，为什么 $('#something').checked 无效？
您的代码缺少参数，确实应该使用 jQuery 方式获取检查状态。
Shore：getElementById 起作用的原因是它返回一个 DOM 元素，而 $ jQuery 函数返回一个 jQuery 对象。 jQuery 对象将 DOM 元素作为属性，但它本身并不是 DOM 对象。
我知道我迟到了，但这只有在“点击”事件触发时才有效。如果由于某种原因您要在代码的其他地方执行类似的操作： $("#something").attr("checked", "checked") 永远不会触发点击事件。
@DavidStinemetze：我想说你可以听change 而不是点击。我正在更新答案

【解决方案2】：

如果我们在输入复选框上附加了一个标签，点击会影响一个标签吗？

我认为最好使用 .change() 函数

<input type="checkbox" id="something" />

$("#something").change( function(){
  alert("state changed");
});

【讨论】：

这应该是公认的答案，因为问题是关于监听检查事件，而不是点击事件。

【解决方案3】：

使用:checked 选择器来确定复选框的状态：

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});

【讨论】：

【解决方案4】：

对于 JQuery 1.7+ 使用：

$('input[type=checkbox]').on('change', function() {
  ...
});

【讨论】：

【解决方案5】：

此代码可以满足您的需要：

<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});

另外，你可以在jsfiddle查看它

【讨论】：

【解决方案6】：

使用下面的代码 sn-p 来实现。：

$('#checkAll').click(function(){
  $("#checkboxes input").attr('checked','checked');
});

$('#UncheckAll').click(function(){
  $("#checkboxes input").attr('checked',false);
});

或者您可以对单个复选框执行相同操作：

$('#checkAll').click(function(e) {
  if($('#checkAll').attr('checked') == 'checked') {
    $("#checkboxes input").attr('checked','checked');
    $('#checkAll').val('off');
  } else {
    $("#checkboxes input").attr('checked', false);
    $('#checkAll').val('on'); 
  }
});

演示：http://jsfiddle.net/creativegala/hTtxe/

【讨论】：

【解决方案7】：

根据我的经验，我不得不利用事件的 currentTarget：

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});

【讨论】：

【解决方案8】：

使用点击事件以获得与 MSIE 的最佳兼容性

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});

【讨论】：

如何判断是否勾选？
我需要知道点击是勾选还是取消勾选。
然后可以使用$(this).is(':checked') 来测试刚刚点击的item的状态

【解决方案9】：

$(document).ready(function(){
    checkUncheckAll("#select_all","[name='check_boxes[]']");
});

var NUM_BOXES = 10;
// last checkbox the user clicked
var last = -1;
function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  event = event || window.event;

  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
    var di = num > last ? 1 : -1;
    for (var i = last; i != num; i += di)
      document.forms.boxes['box[' + i + ']'].checked = true;
  }
  last = num;
}
function init() {
  for (var i = 0; i < NUM_BOXES; i++)
    document.forms.boxes['box[' + i + ']'].onclick = check;
}

HTML：

<body onload="init()">
  <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
  </form>
</body>

【讨论】：

嘿！伙计，你在这里做什么？
看起来像一个范围选择（即，检查第一项，按住 shift 键，检查最后一项；并且检查中间的所有项。）但是，这比问题要求的要多得多.但是缺少一些代码，例如 checkUncheckAll()。