我试图使用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事件被触发(并且值被正确获取),但是之后复选框被取消选中。
任何人都可以告诉我如何实现我想要做的事情?
解决方法
使用.triggerHandler()而不是.trigger():
$('input[name=check1]').attr('checked',true).triggerHandler('click');
另外,使用.prop()而不是.attr():
$('input[name=check1]').prop('checked',true).triggerHandler('click');
(如果你使用的是jQuery 1.6或更新版本)编辑 – 另外,当我评论另一个答案时,你必须注意jQuery的奇怪的行为,以编程方式触发事件。 Here is an illustrative jsfiddle.当元素发生真正的“点击”时,元素的“点击”处理程序将会看到“已检查”标志的更新值。也就是说,如果您单击未选中的复选框,则点击处理程序将看到“已检查”标志设置为true。但是,如果您通过jQuery在未勾选的复选框中触发“点击”,“点击”处理程序将看到“已检查”标志设置为false!这是一个非常糟糕的事情,在我看来,但总是这样做。
再次编辑 – 哦,我也忘了另一个重要的(和令人烦恼的)jQuery奇怪:由于原因不明,.triggerHandler()API将仅调用第一个匹配元素的处理程序。如果您尝试触发所有复选框“点击”处理程序,换句话说:
$('input:checkBox').triggerHandler('click');
那么只会触发页面上的第一个复选框。我通常为了处理精神错乱而做的是将处理程序绑定到我自己的假事件名称以及“点击”中:
$('input:checkBox').bind('click my-click',function() ... ) // or ".on()" with 1.7
这样我可以触发“我的点击”,并获得两个世界的最佳:库触发所有匹配元素的处理程序,但不会切换元素的实际状态。