次のマークアップがあるとします。
<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 イベント ハンドラーが実行されないのはなぜですか?