jQuerycheckbox事件处理
我有以下几点：
<form id="myform"> <input type="checkbox" name="check1" value="check1"> <input type="checkbox" name="check2" value="check2"> </form> 如何使用jQuery来捕获在myform发生的任何检查事件，并告诉哪个checkbox被切换（并知道是否打开或closures）？
$('#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元素的需求，并且允许您dynamic添加checkbox并在侧面板中查看结果（通过redirectconsole.log ）。
-
监听
checkboxes上的click事件不是一个好主意，因为这不会允许键盘切换或者在匹配的label元素被点击的情况下进行更改。 始终倾听change事件。 -
使用jQuery
:checkbox伪select器，而不是input[type=checkbox]。:checkbox更短，更具可读性。 -
在jQuery中使用
is():checked伪select器以testingcheckbox是否被选中。 这可以保证在所有浏览器上都能正常工作。
附加到现有元素的基本事件处理程序
$('#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/
笔记：
- 使用
:checkboxselect器，这是优于使用input[type=checkbox] - 这只会连接到事件注册时存在的匹配元素。
委托给祖先元素的事件处理程序：
委托事件处理程序是为那些元素可能还不存在（dynamic加载或创build）并且非常有用的情况而devise的。 他们把责任分配给祖先元素（因此是术语）。
$('#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）。 - 然后，它将jQueryselect器（在这种情况下为
':checkbox'）仅应用于泡泡链中的元素。 - 然后将事件处理函数应用于那些引起事件的匹配元素。
- 使用
document作为默认连接委托事件处理程序，如果没有其他更接近/方便。 - 不要使用
body来附加委派的事件，因为它有一个bug（与样式相关），可以阻止它获取鼠标事件。
委托处理程序的结果是，匹配元素只需要在事件时存在，而不是在事件处理程序注册时存在。 这允许dynamic添加的内容来生成事件。
问：它慢吗？
答：只要事件处于用户交互速度，您不必担心委托事件处理程序和直接连接的处理程序之间的速度差异微乎其微 。 代表团的好处远大于轻微的缺点。 委托事件处理程序实际上更快地注册，因为它们通常连接到单个匹配元素。
为什么prop('checked', true)触发change事件？
这实际上是通过devise。 如果事情真的发生了，你很容易就会陷入无尽的更新的境地。 相反，在更改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/
笔记：
- 不要像一个用户所build议的那样使用
triggerHandler，因为它不会将事件冒泡到委托事件处理程序中。
JSFiddle： http : //jsfiddle.net/TrueBlueAussie/u8bcggfL/8/
尽pipe它可以用于直接连接到元素的事件处理程序：
JSFiddle： http : //jsfiddle.net/TrueBlueAussie/u8bcggfL/9/
使用.triggerHandler（）触发的事件不会冒泡DOM层次结构; 如果不是直接由目标元素处理，他们什么也不做。
参考： http ： //api.jquery.com/triggerhandler/
如果任何人有其他function，他们觉得不包括这一点，请做build议补充 。
在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); });
- 事件处理程序将继续存在
- 将捕获checkbox被键盘改变，而不仅仅是点击
$('#myform input:checkbox').click( function(e){ alert($(this).is(':checked')) } )
认识到提问者明确要求jQuery的事实，并select的答案是正确的，应该指出，这个问题实际上并不需要 jQuery。 如果没有它想要解决这个问题，可以简单地设置他或她想要添加附加function的checkbox的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'); } });
