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 input:checkbox').click(
function(e){
alert($(this).is(':checked'))
}
)

使用更改事件。

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

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


});

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

确认提问者特别请求 jQuery 并且选择的答案是正确的这一事实，应该注意到这个问题实际上并不是每个 say 都是 需要 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/

有几个有用的答案，但似乎没有涵盖所有的 最新的选项。为此，我的所有示例都考虑到了匹配 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: < a href = “ http://JSFiddle.net/TrueBlueAussie/u8bcggfL/2/”> 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: < a href = “ http://JSFiddle.net/TrueBlueAussie/u8bcggfL/4/”> http://JSFiddle.net/trueblueaussie/u8bcggfl/4/

备注:

• 这是通过侦听事件(在本例中为 change)以冒泡形成一个不变的祖先元素(在本例中为 #myform)来实现的。
• 它将 jQuery 选择器(本例中为 ':checkbox')仅应用于元素 在泡沫链中。
• 它 那么仅将事件处理程序函数应用于那些导致事件的匹配元素。
• 使用 document作为默认连接委托的事件处理程序，如果没有其他更接近/方便的方法。
• 不要使用 body附加委托的事件，因为它有一个 bug (与样式有关) ，可以阻止它获得鼠标事件。

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

问: 它慢吗？

A: 只要事件处于用户交互速度，就不需要担心代理事件处理程序和直接连接处理程序之间的 微不足道速度差异。授权的好处远远大于任何微小的不利之处。委托事件处理程序实际上是 更快地注册，因为它们通常连接到单个匹配元素。

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

这其实是设计好的。如果它确实触发了事件，你将很容易陷入无休止的更新状态。相反，在更改选中的属性之后，使用 trigger(而不是 triggerHandler)将更改事件发送到相同的元素:

例如，没有 trigger就不会发生事件

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

JSFiddle: < a href = “ http://JSFiddle.net/TrueBlueAussie/u8bcggfL/5/”> http://JSFiddle.net/trueblueaussie/u8bcggfl/5/

例如，对于 trigger，正常的更改事件被捕获

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

JSFiddle: < a href = “ http://JSFiddle.net/TrueBlueAussie/u8bcggfL/6/”> http://JSFiddle.net/trueblueaussie/u8bcggfl/6/

备注:

• 不要像一个用户建议的那样使用 triggerHandler，因为它不会将事件冒泡发送到 授权事件处理程序。

JSFiddle: < a href = “ http://JSFiddle.net/TrueBlueAussie/u8bcggfL/8/”> http://JSFiddle.net/trueblueaussie/u8bcggfl/8/

虽然它的 威尔工作的事件处理程序 直接相连的元素:

JSFiddle: < a href = “ http://JSFiddle.net/TrueBlueAussie/u8bcggfL/9/”> http://JSFiddle.net/trueblueaussie/u8bcggfl/9/

触发的事件。TriggerHandler ()不会冒出 DOM 层次结构; 如果它们不是由目标元素直接处理的，那么它们什么也不做。

参考资料: http://api.jquery.com/triggerhandler/

如果任何人有额外的功能，他们觉得不涵盖这一点，请建议添加 。

我已经尝试的代码从第一个答案，它不工作，但我有发挥和这个为我工作

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