JQuery – событие checkbox on-change не срабатывает, если отмечено с помощью JQuery

У меня есть функция Check All которая проверяет все флажки. Я использую JQuery для этого.

Но у меня также есть функция on change которая переключает class на обертку div:

 $('input[type="checkbox"]').on('change', function(){ $(this).closest('div').toggleClass('highlight'); }); 

Эта функция запускается, когда я нажимаю флажок, но не, если я нажму « Check all .

Есть ли способ вручную запустить событие с помощью JQuery? Или есть лучшее решение?

благодаря

РЕДАКТИРОВАТЬ:

Вот упрощенный HTML:

 Check All 
ABC
PQR
XYZ

Вот JSFiddle

http://jsfiddle.net/DarcFiddle/d4VTh/

После того, как вы проверите клик, вы должны вызвать событие change (), подобное этому

 $(document).ready(function(){ $("input[type='checkbox']").on('change', function(){ $(this).closest('div').toggleClass('highlight'); }); $("#check_all").on('click', function(){ $("input[type='checkbox']").prop('checked', true).change(); }); }); 

Это вызовет событие change , но только после того, как вы привяжете его первым.

 $('input[type="checkbox]').trigger('change'); 

Вы можете попробовать это,

 $(document).on('change','input[type="checkbox]' ,function(){ // $this will contain a reference to the checkbox var $this = $(this); if ($this.is(':checked')){//To CHECK CHECK BOX IS CHECKED OR NOT $(this).closest('div').toggleClass('highlight'); } }); 

Надеюсь, поможет,

Почти идентичен ответу visnu, но при прямом вызове click () будут срабатывать все события кликов, связанные с jQuery. Если вы продемонстрируете это, вы увидите, что оно также отменяет флажки, тогда как его ответ просто удаляет выделение, пока они остаются нажатыми.

 $(document).ready(function(){ $("input[type='checkbox']").on('change', function(){ $(this).closest('div').toggleClass('highlight'); }); $("#check_all").on('click', function(){ $("input[type='checkbox']").click(); }); }); 

Проверьте эту модификацию скрипта вашего кода: http://jsfiddle.net/d4VTh/51/

 $(document).ready(function(){ $("input[type='checkbox']").on('change', function(){ if (this.checked) $(this).closest('div').addClass('highlight'); else $(this).closest('div').removeClass('highlight'); }); $("#check_all").on('click', function(){ var item = $("input[type='checkbox']") item.prop('checked', !item.prop('checked')).change(); }); });