為什么不產生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/