为什么动态更改复选框不会触发表单更改事件？答案

【问题标题】：Why does dynamically changing a checkbox not trigger a form change event?为什么动态更改复选框不会触发表单更改事件？
【发布时间】：2012-04-15 03:09:24
【问题描述】：

我写了这个 javascript/jQuery 的 sn-p 来更改一个复选框。 http://jsfiddle.net/johnhoffman/crF93/

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

<input type="checkbox" />
<a href="#">Change CheckBox</a>

有趣的是，单击链接会更改文本框，但不会触发表单更改事件，该事件会调用在 Chrome Web 开发者控制台中记录消息的函数。为什么？我如何让它做到这一点？

【问题讨论】：

"The change event occurs when a control loses the input focus and its value has been modified since gaining focus." 没有焦点变化意味着没有变化事件。
onchange event not fire when the change come from antoher function的可能重复

标签： javascript jquery

【解决方案1】：

您需要触发更改事件.trigger('change')，以便该事件知道发生了更改。

来自http://api.jquery.com/change/：

说明：将事件处理程序绑定到“更改”JavaScript 事件，或在元素上触发该事件。

此方法是前两个变体中.on( "change", handler ) 和第三个变体中.trigger( "change" ) 的快捷方式。

change 事件在其值更改时发送到元素。此事件仅限于<input> 元素、<textarea> 框和<select> 元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会延迟到元素失去焦点为止。

演示：

http://jsfiddle.net/nPkPw/3/

使用链接：http://jsfiddle.net/nPkPw/5/
即$("input[type='checkbox']").trigger('change').attr('checked', 'checked');

【讨论】：

模拟点击似乎有点冗长
为了将来参考，我必须在 attr 之后放置触发器，以便我的脚本查看更改是什么。
触发器应该发生在 attr 改变之后而不是之前 $("input[type='checkbox']").attr('checked', 'checked').trigger('change');
伙计......希望我能在 4 小时前搜索时找到这个 - （谷歌你在听） - “切换一个过滤器参数 isotop js”。谢谢老兄。

【解决方案2】：

这并不奇怪，但我想你可以把这个列为无效in the msdn的列表。

"该事件在内容提交时触发，而不是在提交时触发值正在改变。”
"onchange 事件不会触发选择对象的选定选项以编程方式更改。"

你总是可以.click()它jsFiddle

【讨论】：