Question

Assume, we 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 we click on the any of the button?

Answer 1

Any programatic change (changes from script) to an input element will not trigger onchange event..

Alternatively, you should trigger change event manually when you change the status/value.

See below,

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

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