jquery复选框事件处理

$('#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 是 不 这是一个好主意,因为它不允许键盘切换或在匹配的地方进行更改 标签 已单击元素。总是倾听 change 事件。

• 使用jQuery :checkbox 伪选择器,而不是 input[type=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/

笔记:

• 使用 复选框 选择器,这比使用 输入[类型=复选框]
• 此连接 只有 匹配事件注册时存在的元素。

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

委托的事件处理程序是为元素可能还不存在(动态加载或创建)的情况而设计的,并且 非常 有用的。他们 代表 对祖先元素的责任(因此术语)。

$('#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/

笔记:

• 这是通过监听事件(在本例中 改变 )冒泡到不改变的祖先元素(在本例中 #myform )
• 它 然后 应用jquery选择器( ':checkbox' 在本例中)仅限于元素 在泡沫链中 .
• 它 然后 仅将事件处理程序函数应用于导致事件的匹配元素。
• 使用 document 作为连接委托事件处理程序的默认值,如果没有其他更接近/方便的方法。
• 不要使用 body 附加委托事件,因为它有一个可以阻止它获取鼠标事件的错误(与样式有关)。

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

问:速度慢吗?

答: 只要事件以用户交互速度进行,就不需要担心 可以忽略不计的 委托的事件处理程序和直接连接的处理程序之间的速度差异。授权的好处远远大于任何小的缺点。委托的事件处理程序实际上是 注册速度更快 因为它们通常连接到一个匹配的元素。

为什么不 prop('checked', true) 开火 改变 事件?

这实际上是设计出来的。如果它确实触发了事件,那么您很容易进入一种无休止的更新状态。相反,在更改checked属性后,使用 trigger (不是) triggerHandler ):

例如没有 触发 无事件发生

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

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

例如 触发 捕捉到正常更改事件

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

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

笔记:

• 不要使用 触发处理机 正如一个用户所建议的,因为它不会向 委派 事件处理程序。

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每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
  }
}

Fiddle: http://jsfiddle.net/Y9f66/1/

我已经尝试了第一个答案的代码,它不起作用,但我已经四处游玩,这对我来说是有用的。

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