JQuery - Checkbox on-change event doesn't fire if checked using JQuery

Question

I have this Check All function which check all check boxes. I use JQuery to do that.

But I also have this on change function that toggle a class to the wrapper div:

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

That function runs when I click the Checkbox, but not if I click Check all.

Is there any way to manually fire an event using JQuery? Or is there better solution?

Thanks

EDIT:

Here's the simplified HTML:

<a id="check_all">Check All</a> <div>     <input type="checkbox" name="cb" value="abc">ABC<br> </div> <div>     <input type="checkbox" name="cb" value="pqr">PQR<br> </div> <div>     <input type="checkbox" name="cb" value="xyz">XYZ<br> </div> 

Here's the JSFiddle

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

Answer 1

After click check all you should call change() event like this

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

Answer 2

This will trigger the change event, but only after you bind it first.

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