Javascript 为什么动态更改复选框不会触发表单更改事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10159214/
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
Why does dynamically changing a checkbox not trigger a form change event?
提问by John Hoffman
I wrote this snippet of javascript/jQuery to change a check box. http://jsfiddle.net/johnhoffman/crF93/
我写了这段 javascript/jQuery 来更改复选框。 http://jsfiddle.net/johnhoffman/crF93/
Javascript
Javascript
$(function() {
$("a").click(function() {
if ($("input[type='checkbox']").attr('checked') == "checked")
$("input[type='checkbox']").removeAttr('checked');
else
$("input[type='checkbox']").attr('checked', 'checked');
return false;
});
$("input[type='checkbox']").change(function(){
console.log("Checkbox changed.");
});
});?
HTML
HTML
<input type="checkbox" />
<a href="#">Change CheckBox</a>?
Interestingly, clicking the link alters the text box, but does not trigger the form change event that calls the function that logs a message in Chrome Web Developer Console. Why? How do I make it do that?
有趣的是，单击该链接会更改文本框，但不会触发表单更改事件，该事件调用在 Chrome Web 开发人员控制台中记录消息的函数。为什么？我如何让它做到这一点？
回答by Tats_innit
You need to trigger the change event, .trigger('change'), so that event knows that a change took place.
您需要触发更改事件，.trigger('change')以便该事件知道发生了更改。
From http://api.jquery.com/change/:
从http://api.jquery.com/change/：
Description:Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
This method is a shortcut for
.on( "change", handler )in the first two variations, and.trigger( "change" )in the third.The
changeevent is sent to an element when its value changes. This event is limited to<input>elements,<textarea>boxes and<select>elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
描述：将事件处理程序绑定到“更改”JavaScript 事件，或在元素上触发该事件。
此方法是
.on( "change", handler )前两种变体和.trigger( "change" )第三种变体的快捷方式。
change当元素的值改变时，该事件被发送到元素。此事件仅限于<input>元素、<textarea>框和<select>元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会推迟到该元素失去焦点时。
Demo:
演示：
Using chaining: http://jsfiddle.net/nPkPw/5/
i.e. $("input[type='checkbox']").trigger('change').attr('checked', 'checked');
使用链接：http: //jsfiddle.net/nPkPw/5/
即$("input[type='checkbox']").trigger('change').attr('checked', 'checked');
回答by Sinetheta
This isn't surprising, but I guess you could as this to the list of non-effect in the msdn.
这并不奇怪，但我想您可以将其作为msdn 中的无效列表。
- "This event is fired when the contents are committed and not while the value is changing."
- "The onchange event does not fire when the selected option of the select object is changed programmatically."
- “在提交内容时触发此事件，而不是在值更改时触发。”
- “以编程方式更改选择对象的选定选项时，不会触发 onchange 事件。”
You could always just .click()it jsFiddle
你总是可以只是.click()它jsFiddle
