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

Question

我编写了这段JavaScript/jQuery代码来更改复选框。

http://jsfiddle.net/johnhoffman/crF93/

$(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网络开发者控制台中。为什么？我该如何让它做到这一点？

- John Hoffman

---

“当控件失去输入焦点并且自获取焦点以来其值已被修改时，将触发更改事件。”（http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents）没有焦点变化就意味着没有更改事件。 - mu is too short

可能是重复的问题：当更改来自另一个函数时，onchange事件不触发。 - mu is too short

Answer 1

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

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

描述：将事件处理程序绑定到“change”JavaScript事件，或在元素上触发该事件。 此方法是前两种变体中.on("change",handler)的快捷方式，以及第三种变体中的.trigger("change")。

当元素的值发生更改时，将向该元素发送change事件。该事件仅限于元素、框和<select>元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，立即触发事件，但对于其他元素类型，事件被延迟直到元素失去焦点。</br><div class="h-2"></div>演示： <a href="http://jsfiddle.net/nPkPw/3/" rel="noreferrer">http://jsfiddle.net/nPkPw/3/</a> 使用链接：<a href="http://jsfiddle.net/nPkPw/5/" rel="noreferrer">http://jsfiddle.net/nPkPw/5/</a> 即 <code>$("input[type='checkbox']").trigger('change').attr('checked', 'checked');</code>

- Tats_innit

---

仿真点击似乎有点啰嗦。 - Sinetheta

供日后参考，我必须在属性后放置触发器，以便我的脚本能够查看更改内容。 - Yohn

触发应该在属性更改后发生而不是之前。 $("input[type='checkbox']").attr('checked', 'checked').trigger('change'); - xiao

哎呀，真希望我四个小时前在搜索时就能找到这个（Google你在听吗）：“切换Isotop JS的一个过滤参数”。谢谢啊，老兄。 - Sagive

Answer 2

这并不令人惊讶，但我想你可以将其添加到 MSDN 的无效列表中。

• "当内容被提交而值未改变时触发此事件。"
• "当通过编程方式更改select对象的选定选项时，不会触发onchange事件。"

你总是可以使用 .click() 来模拟点击它，jsFiddle

- Sinetheta