Почему не происходит событие 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

Любой programatic изменение (из скрипта) к входному элементу не будет вызывать onchange события ..

В качестве альтернативы, вы должны вызвать событие изменения вручную при изменении статус/значение.

Смотри ниже,

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

ДЕМО:http://jsfiddle.net/h7kyq/4/

Answer 2

События не срабатывают, когда изменение происходит в javascript. Вам нужно будет стрелять событие само:

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