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:

<label for="checkbox1" <input class="checkme" type="checkbox" id="checkbox1"> Checkbox 1</label><br>
<label for="checkbox2" <input class="checkme" type="checkbox" id="checkbox2"> Checkbox 2</label><br>
<label for="checkbox3" <input class="checkme" type="checkbox" id="checkbox3"> Checkbox 3</label><br>
<label for="checkbox4" <input class="checkme" type="checkbox" id="checkbox4"> Checkbox 4</label><br>
<label for="checkbox5" <input class="checkme" type="checkbox" id="checkbox5"> Checkbox 5</label><br>
<label for="checkbox6" <input class="checkme" type="checkbox" id="checkbox6"> Checkbox 6</label><br>
<label for="checkbox7" <input class="checkme" type="checkbox" id="checkbox7"> Checkbox 7</label><br>
<label for="checkbox8" <input class="checkme" type="checkbox" id="checkbox8"> Checkbox 8</label><br>
<label for="checkbox9" <input class="checkme" type="checkbox" id="checkbox9"> Checkbox 9</label><br>
<label for="checkbox10" <input class="checkme" type="checkbox" id="checkbox10"> Checkbox 10</label><br>
<label for="checkbox11" <input class="checkme" type="checkbox" id="checkbox11"> Checkbox 11</label><br>
<label for="checkbox12" <input class="checkme" type="checkbox" id="checkbox12"> Checkbox 12</label><br>
<label for="checkbox13" <input class="checkme" type="checkbox" id="checkbox13"> Checkbox 13</label><br>
<label for="checkbox14" <input class="checkme" type="checkbox" id="checkbox14"> Checkbox 14</label><br>
<label for="checkbox15" <input class="checkme" type="checkbox" id="checkbox15"> Checkbox 15</label><br>
<label for="checkbox16" <input class="checkme" type="checkbox" id="checkbox16"> Checkbox 16</label><br>
<label for="checkbox17" <input class="checkme" type="checkbox" id="checkbox17"> Checkbox 17</label><br>
<label for="checkbox18" <input class="checkme" type="checkbox" id="checkbox18"> Checkbox 18</label><br>
<label for="checkbox19" <input class="checkme" type="checkbox" id="checkbox19"> Checkbox 19</label><br>
<label for="checkbox20" <input class="checkme" type="checkbox" id="checkbox20"> Checkbox 20</label><br>
<label for="checkbox21" <input class="checkme" type="checkbox" id="checkbox21"> Checkbox 21</label><br>
<label for="checkbox22" <input class="checkme" type="checkbox" id="checkbox22"> Checkbox 22</label><br>
<label for="checkbox23" <input class="checkme" type="checkbox" id="checkbox23"> Checkbox 23</label><br>
<label for="checkbox24" <input class="checkme" type="checkbox" id="checkbox24"> Checkbox 24</label><br>
<label for="checkbox25" <input class="checkme" type="checkbox" id="checkbox25"> Checkbox 25</label><br>
<label for="checkbox26" <input class="checkme" type="checkbox" id="checkbox26"> Checkbox 26</label><br>
<label for="checkbox27" <input class="checkme" type="checkbox" id="checkbox27"> Checkbox 27</label><br>
<label for="checkbox28" <input class="checkme" type="checkbox" id="checkbox28"> Checkbox 28</label><br>
<label for="checkbox29" <input class="checkme" type="checkbox" id="checkbox29"> Checkbox 29</label><br>
<label for="checkbox30" <input class="checkme" type="checkbox" id="checkbox30"> Checkbox 30</label><br>

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

// The box's status has changed. 
$(document).on('change', '.checkme', function () {
    var label = $(this).parent();
    if ($(this).prop('checked')) {
        label.css('color', 'red');
    } else {
        label.css('color', 'black');
    }

});

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:

// One checkbox to check them all
$('#checkThemAll').on('change', function () {
    if ($(this).prop('checked')) {
        $('.checkme').each(function () {
            $(this).prop('checked', true).trigger('change');
        });
    } else {
        $('.checkme').each(function () {
            $(this).prop('checked', false).trigger('change');
        });
    }
});

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.