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()：（如果你使用jQuery 1.6或更高版本）

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

编辑 —另外，正如我对另一个答案所评论的那样，当以编程方式触发事件时，您必须小心jQuery的怪异行为。 Here is an illustrative jsfiddle.当元素发生真正的“点击”时，元素的“click”处理程序将会看到“checked”标志的更新值。也就是说，如果您点击未选中的复选框，则点击处理程序将看到“已检查”标志设置为true。但是，如果您通过jQuery在未选中的复选框上触发“click”，则“click”处理程序会将“checked”标志设置为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); 

Answer 3

this answer似乎很好地工作：

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

jsFiddle demo

Answer 4

.on('changed', ...)绝对是你应该绑定到复选框元素（它的行为更合理。然后你可以手动触发一个.click()关于你想要切换状态的元素来查看正确的事件触发事件（并看到这些处理程序也看到了处于匹配状态的DOM）。

<input type="checkbox" value="checked" name="check1"> 
<script> 
    $('input').on('change', function(e) {alert(e.target.value);}); 
    $('input').click(); 
    // see the alert, and if you checked $(e.target).is(':checked') you should get true 
</script>