Question

我写了这个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 Developer Console中记录消息的功能的表单更改事件。为什么？我该怎么做呢？

Answer 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');

Answer 2

这并不奇怪，但我想你可以将其作为非效果列表in the msdn。

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

您可以随时.click() jsFiddle

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

2 个答案: