Question

I have a list of checkboxes. Each checkbox has .change(function(){alert('xyz')}). Each checkbox has a class abc.
I also have an additional checkbox called ‘ALL’. When the ‘ALL’ checkbox is changed, it changes the state of all the other checkboxes.

I would like the change of the ‘ALL’ checkbox to trigger the change (.change(...)) of all the other checkboxes. But since the state of the other checkboxes is done programmatically, it doesn’t work by itself.

I’ve tried to use $('.abc').change() to trigger the change event of all the checkboxes, but it didn’t work.

What am I doing wrong, and how can the task at hand be achieved ?
BTW, if I do $('#id_of_a_specific_checkbox').change() it works great.

UPDATE
Example of what I have:
http://jsfiddle.net/ZqJvc/

It’s pretty much what I have in the large project… And in the short example it works :/
But in the real project it doesn’t work. The only difference is that in the real project I have lots of checkboxes. Weird… I guess it’s back to the debugger.

UPDATE
After Chrome crashed completely… I restarted the browser and it just worked as in the example above. Sorry wasting our time.

Answer 1

To set all checkboxes with the .abc class to true when the ALL checkbox changes use

$("input[name=ALL]").change( function( ) {

    $(".abc").prop("checked", $(this).prop("checked") );
    $(".abc").trigger("change");
});

Fiddle here