jQuery 检查复选框并触发 javascript onclick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10268222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery checking a checkbox and triggering javascript onclick event
提问by YK Tan
I'm trying to check a checkbox using jQuery and trigger the onclick event in the process.
我正在尝试使用 jQuery 检查复选框并在此过程中触发 onclick 事件。
Say I have a checkbox defined in html:
假设我在 html 中定义了一个复选框：
<input type="checkbox" value="checked" name="check1" onclick="alert(this.value);">
And I have a jQuery statement that is triggered in a function:
我有一个在函数中触发的 jQuery 语句：
$('input[name=check1]').attr('checked', true);
The result is the checkbox gets checked but the javascript onclick event is not triggered (hence no alert). But if I were to trigger the click even manually as such:
结果是复选框被选中，但未触发 javascript onclick 事件（因此没有警报）。但是，如果我要手动触发点击：
$('input[name=check1]').attr('checked', true).trigger('click');
The result is the checkbox gets checked, javascript onclick event is triggered (and the value is correctly gotten) but then the checkbox gets unchecked after that.
结果是复选框被选中，javascript onclick 事件被触发（并且值被正确获取），但之后复选框被取消选中。
Can anyone tell me how I can achieve what I'm trying to do?
谁能告诉我如何实现我想要做的事情？
回答by Pointy
Use .triggerHandler()instead of .trigger():
使用.triggerHandler()代替.trigger()：
$('input[name=check1]').attr('checked', true).triggerHandler('click');
Also, use .prop()instead of .attr():
另外，使用.prop()代替.attr()：
$('input[name=check1]').prop('checked', true).triggerHandler('click');
(if you're using jQuery 1.6 or newer.) edit— Also, as I commented on another answer, you have to watch out for jQuery's weird behavior when programmatically triggering events. Here is an illustrative jsfiddle.When a real "click" happens on an element, the "click" handler for the element will see the updated value of the "checked" flag. That is, if you click on an unchecked checkbox, the click handler will see the "checked" flag set to true. However, if you trigger "click" on an unchecked checkbox via jQuery, the "click" handler will see the "checked" flag set to false! That's a really bad thing, in my opinion, but it's always done that.
（如果您使用的是 jQuery 1.6 或更高版本。）编辑— 此外，正如我在另一个答案中评论的那样，您必须在以编程方式触发事件时注意 jQuery 的怪异行为。这是一个说明性的 jsfiddle。当一个真正的“点击”发生在一个元素上时，该元素的“点击”处理程序将看到“已检查”标志的更新值。也就是说，如果您单击未选中的复选框，则单击处理程序将看到“已选中”标志设置为true。但是，如果您通过 jQuery 在未选中的复选框上触发“单击”，“单击”处理程序将看到“选中”标志设置为false! 在我看来，这是一件非常糟糕的事情，但它总是那样做。
edit again— oh, also, I forgot another important (and irritating) jQuery weirdness: for reasons unknown, the .triggerHandler()API will only invoke handlers on the first matched element. If you try to trigger all the checkbox "click" handlers, in other words:
再次编辑- 哦，还有，我忘记了另一个重要（且令人恼火）的 jQuery 怪异之处：出于未知原因，.triggerHandler()API 只会在第一个匹配的元素上调用处理程序。如果您尝试触发所有复选框“单击”处理程序，换句话说：
$('input:checkbox').triggerHandler('click');
then only the first checkbox on the page will be triggered. What I generally do in order to deal with the insanity is bind the handler with my own fake event name as well as "click":
那么只会触发页面上的第一个复选框。为了处理这种疯狂，我通常做的是将处理程序与我自己的假事件名称以及“单击”绑定：
$('input:checkbox').bind('click my-click', function() ... ) // or ".on()" with 1.7
That way I can trigger "my-click" and get the best of both worlds: the library triggers the handler on allthe matched elements, but it won't toggle the actual state of the elements.
这样我就可以触发“我的点击”并获得两全其美：库在所有匹配的元素上触发处理程序，但它不会切换元素的实际状态。
回答by iambriansreed
Change:
改变：
$('input[name=check1]').attr('checked', true).trigger('click');
To:
到：
$('input[name=check1]').trigger('click').prop('checked', true);
回答by ajax333221
this answerseems to work fine:
这个答案似乎工作正常：
$('input[name=check1]').attr('checked', true).change();
$('input[name=check1]').attr('checked', true).change();
回答by aaaronic
.on('changed', ...)is definitely what you should be binding to on checkbox elements (it behaves much more reasonably. Then you could just manually trigger a .click()on the elements you want to toggle the state of to see the proper event trigger happen (and see the DOM in a matching state to what those handlers also saw).
.on('changed', ...)绝对是您应该绑定到复选框元素的内容（它的行为更合理。然后您可以手动触发.click()要切换状态的元素上的a以查看正确的事件触发器发生（并查看匹配的 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>
