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

问题描述：

我写了javascript/jQuery的这个片段来改变一个复选框。 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开发者控制台。为什么？我该如何做到这一点？

[当控制失去输入焦点并因为其值已被修改“会发生变化事件获得关注。“]（http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents）没有焦点改变意味着没有改变事件。 – 2012-04-15 03:21:15

[onchange事件不会在更改来自antoher函数时触发]（http：// *。com/questions/7055729/onchange-event-not-fire-when-the-the-change-come-from-antoher-function） – 2012-04-15 03:22:15

答

您需要触发更改事件，.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');

似乎有点冗长以模拟点击 – Sinetheta 2012-04-15 03:17:58

@Sinetheta Hiya cooleos会修剪它一下。 :) cheerios！ – 2012-04-15 03:19:09

供将来参考，我不得不在attr之后加上触发器，这样我的脚本才能看到变化是什么。 – Yohn 2012-11-10 14:52:00

答

这并不令人感到意外，但我想你可以将它作为非效果列表in the msdn。

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

你总是可以只.click()它jsFiddle

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

相关推荐