javascript - Why does not onChange event produced? -

assume, have following markup:

<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> 

and following javascript code:

(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)); 

(see http://jsfiddle.net/inst/h7kyq/1/)

why doesn't input's onchange event handler executed when click on of button?

any programatic change (changes script) input element not trigger onchange event..

alternatively, should trigger change event manually when change status/value.

see below,

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

demo: http://jsfiddle.net/h7kyq/4/