jQuery复选框事件处理

Question

我有以下：

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

我如何使用 jQuery 来捕获 myform 中发生的 任何 检查事件并判断哪个复选框被切换（并知道它是打开还是关闭）？

Answer 1

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

Answer 2

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

Answer 3

使用更改事件。

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

Answer 4

在 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);

    });

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

Answer 5

承认提问者特别要求 jQuery 并且选择的答案是正确的，应该注意这个问题实际上并不需要 jQuery per say。如果想在没有它的情况下解决这个问题，可以简单地设置他或她想要添加附加功能的复选框的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/

Answer 6

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

• 侦听checkboxes 上的click 事件不是一个好主意，因为这将不允许键盘切换或在单击匹配的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 事件？

这实际上是设计使然。如果它确实触发了该事件，您很容易陷入无休止更新的境地。相反，在更改选中的属性后，使用trigger（不是triggerHandler）向同一元素发送更改事件：

例如没有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/

如果有人有他们认为没有涵盖的其他功能，请提出补充建议。

Answer 7

我已经尝试了第一个答案的代码，它不起作用，但我已经玩过了，这对我有用

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