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 :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

Answer 3

有几个有用的答案,但似乎没有涵盖所有最新选项.为此,我的所有示例都满足匹配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'在本例中)仅应用于bubble链中的元素.
• 然后,它将事件处理函数应用于仅导致该事件的匹配元素.
• document如果没有其他更接近/方便的话,则使用默认连接委派的事件处理程序.
• 不要使用body附加委托事件,因为它有一个错误(与样式有关)可以阻止它获取鼠标事件.

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

问:它慢了吗？

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

为什么不prop('checked', true)开火change呢？

这实际上是设计的.如果它确实触发了该事件,您将很容易陷入无休止的更新状态.相反,在更改checked属性后,使用trigger(not 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 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。如果希望在没有它的情况下解决这个问题，可以简单地设置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

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