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的奇怪行为。 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

这样我可以触发“我点击”并充分利用两个世界：库触发所有匹配元素的处理程序，但它不会切换实际状态元件。

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>

Answer 5

点击选中。再次点击取消选中。.
这是逻辑

$('input[name=check1]').prop('checked',!$('input[name=check1]').prop('checked'));

Answer 6

只是其他帖子的插件，因为我无法发表评论。我发现我不得不使用字典来做道具。

浏览器

$('input[name=check1]').prop({'checked' : !$('input[name=check1]'}).prop('checked'));

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

6 个答案: