javascript - 为什么不产生 onChange 事件？

Question

假设，我们有以下标记：

<form>
    <button type="button" id="all">check all</button>
    <button type="button" id="none">check none</button>
    <input type="checkbox" value="one" />
    <input type="checkbox" value="two" />
    <input type="checkbox" value="three" />
</form>

并遵循 JavaScript 代码：

(function($, document) {
    $('#all').on('click', function() {
         $('input', $(this).parent()).prop('checked', 'checked');
    });
    $('#none').on('click', function() {
        $('input', $(this).parent()).removeProp('checked');
    });

    $('input').on('change', function() {
        alert(this.value);
    });
}(jQuery, document));

（见http://jsfiddle.net/inst/h7kyq/1/）

为什么当我们单击任何按钮时输入的 onChange 事件处理程序不执行？

Answer 1

javascript 中发生更改时不会触发事件。您需要自己触发事件：

$('input', $(this).parent()).removeProp('checked').change();

Answer 2

对输入元素的任何编程更改（从脚本更改）都不会触发onchange事件。

或者，您应该在更改状态/值时手动触发更改事件。

见下文，

$('input', $(this).parent()).removeProp('checked').change();

演示：http: //jsfiddle.net/h7kyq/4/