jQuery检查复选框并触发javascript onclick事件

Question

我正在尝试使用jQuery检查复选框并在此过程中触发onclick事件.

假设我在html中定义了一个复选框:

<input type="checkbox" value="checked" name="check1" onclick="alert(this.value);">

我有一个在函数中触发的jQuery语句:

$('input[name=check1]').attr('checked', true);

结果是复选框被检查但是没有触发javascript onclick事件(因此没有警报).但是,如果我甚至手动触发点击:

$('input[name=check1]').attr('checked', true).trigger('click');

结果是复选框被选中,触发了javascript onclick事件(并且正确获取了值),但之后复选框被取消选中.

谁能告诉我如何实现我想做的事情？

Answer 1

使用.triggerHandler()而不是.trigger():

$('input[name=check1]').attr('checked', true).triggerHandler('click');

另外,使用.prop()而不是.attr():

$('input[name=check1]').prop('checked', true).triggerHandler('click');

(如果您使用的是jQuery 1.6或更新版本.)编辑 - 另外,正如我对另一个答案所评论的那样,您必须在编程触发事件时注意jQuery的奇怪行为.这是一个说明性的jsfiddle. 当元素发生真正的"点击"时,元素的"单击"处理程序将看到"已检查"标志的更新值.也就是说,如果单击未选中的复选框,则单击处理程序将看到"已检查"标志设置为true.但是,如果您通过jQuery在未选中的复选框上触发"单击",则"单击"处理程序将看到"已检查"标志设置为false!在我看来,这是一件非常糟糕的事情,但它始终是这样做的.

再次编辑 - 哦,另外,我忘了另一个重要的(和令人恼火的)jQuery怪异:由于原因未知,.triggerHandler()API将只调用第一个匹配元素上的处理程序.如果您尝试触发所有复选框"单击"处理程序,换句话说:

$('input:checkbox').triggerHandler('click');

然后只会触发页面上的第一个复选框.为了处理疯狂,我通常做的是将处理程序与我自己的假事件名称绑定以及"单击":

$('input:checkbox').bind('click my-click', function() ... ) // or ".on()" with 1.7

这样我就可以触发"我点击"并获得两个世界的最佳效果:库触发所有匹配元素的处理程序,但它不会切换元素的实际状态.

Answer 2

更改:

$('input[name=check1]').attr('checked', true).trigger('click');

至:

$('input[name=check1]').trigger('click').prop('checked', true);