Dieser Artikel wurde - im Gegensatz zu den meisten Artikeln meines Blogs - in Englisch verfasst.
Einer der Gründe dafür könnte sein, dass es sich um einen technischen Artikel handelt, der in englischer Sprache einem breiteren Publikum helfen kann.

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 :)

Veröffentlicht von

Christian Hänsel

Web-Entwickler, SEO-Experte. Ich liebe technisches SEO, die Entwicklung von neuen Ideen und alles rund um das Internet... ja, ich habe mein Hobby zum Beruf gemacht und gehe auch Montags gerne zur Arbeit.

Kommentar verfassen