jQuery复选框事件处理

我有以下几点：

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

如何使用jQuery捕获发生的任何检查事件，myform并告诉您切换了哪个复选框（并知道该复选框是打开还是关闭）？

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

使用更改事件。

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

有几个有用的答案，但似乎没有一个涵盖所有最新选项。为此，我所有的示例都满足匹配label元素的存在，还允许您动态添加复选框并在侧面板上查看结果（通过重定向console.log）。

• 监听click的事件checkboxes是不是一个好主意，因为这将不允许键盘肘或做了匹配，其中改变label被点击的元素。始终收听change事件。

• 使用jQuery :checkbox伪选择器，而不是input[type=checkbox]。:checkbox更短，更易读。

• is()与jQuery :checked伪选择器一起使用，以测试是否已选中复选框。保证可以在所有浏览器上使用。

附加到现有元素的基本事件处理程序：

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

笔记：

• 使用:checkbox选择器，这比使用选择器更好input[type=checkbox]
• 这仅连接到事件注册时存在的匹配元素。

附加到祖先元素的委托事件处理程序：

委托事件处理程序是为元素可能不存在（动态加载或创建）而设计的，非常有用。他们将责任委派给祖先元素（因此称谓）。

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

笔记：

• 这是通过侦听事件（在这种情况下为change）冒泡到一个不变的祖先元素（在这种情况下为#myform）而起作用的。
• 然后，它将jQuery选择器（':checkbox'在本例中）仅应用于气泡链中的元素。
• 然后，它将事件处理程序功能仅应用于导致事件的那些匹配元素。
• document如果没有其他更方便的地方，则使用它作为默认值来连接委托的事件处理程序。
• 不要使用body附加委托事件，因为它有一个错误（与样式有关）可以阻止它获取鼠标事件。

委托处理程序的结果是，匹配元素仅在事件发生时才需要存在，而在事件处理程序注册时则不需要。这允许动态添加内容以生成事件。

问：比较慢吗？

答： 只要事件以用户交互的速度进行，您就不必担心委托事件处理程序和直接连接的处理程序之间的速度差异可忽略不计。代表团的好处远远大于任何小的弊端。委托事件处理程序实际上通常更快地注册，因为它们通常连接到单个匹配元素。

为什么不prop('checked', true)触发该change事件？

这实际上是设计使然。如果确实触发了该事件，那么您很容易陷入无尽更新的境地。相反，在更改了checked属性之后，使用trigger（not triggerHandler）将change事件发送到同一元素：

例如trigger没有事件发生

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle： http //jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

例如，trigger捕获到正常更改事件

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

笔记：

• 不要使用triggerHandler一个用户建议的方式，因为它不会使事件冒泡到委派的事件处理程序中。

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

虽然它会为事件处理工作直接连接的元素：

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

用.triggerHandler（）触发的事件不会使DOM层次膨胀。如果它们不是由目标元素直接处理的，则它们什么也不做。

参考：http : //api.jquery.com/triggerhandler/

如果有人觉得自己没有其他功能，请提出建议。

在jQuery（1.7）中使用新的“ on”方法：http : //api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });

• 事件处理程序将继续存在
• 将捕获是否通过键盘更改了复选框，而不仅仅是单击

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

承认要求者特别要求使用jQuery并且选择的答案是正确的事实，应该注意的是，这个问题实际上并不需要每个人说jQuery。如果一个人想要解决这个问题而没有它，可以简单地设置onClick要为其添加其他功能的复选框属性，如下所示：

HTML：

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

javascript：

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

小提琴：http : //jsfiddle.net/Y9f66/1/

我已经从第一个答案尝试了代码，但没有用，但是我一直在玩，这项工作对我来说

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});