Check all checkboxes with jQuery and trigger change event

With jQuery, it is easy to check and uncheck all checkboxes on a page. But that does not fire the change event of the changes checkboxes. But what do you do if you need to have to do something when the status of the checkboxes changes? It’s actually quite easy.

Here is what we are going to achieve:


So what we are going to do is

  • Set up an event listener which fires when the „Check all checkboxes“ checkbox is being checked or unchecked ( change event )(phew, loads of checkboxes there…)
  • Set up an event listener which fires when one of the checkboxes (or all of them) is being changed.

I have set up 30 checkboxes to play with:

The first listener: What to do when one of the boxes is being checked.

Here, we are setting up the event listener to listen for the change event  of the checkboxes with the class checkme . Once the event fires, the surrounding label’s text color is set to red in case the checkbox is checked. Otherwise, it’s set to black.

If you check or uncheck a checkbox now, the color will change. Yay, it’s working.

Let’s check them all!

Here’s a bit of JavaScript that does exactly that:

Notice the .trigger('change')  at the there? This part „manually“ triggers the change event  of the changed elements.

And hey, this even works with Foundation’s Colored Switches! (See it in the demo below).

Oh yeah, here’s the demo :)

Hope I could help :)

Check all checkboxes with jQuery and trigger change event
Wie bewertests Du diesen Beitrag? Rate this postplease.

Kommentar verfassen