jQuery: Toggle Checkboxes (Select/Unselect All)

If we have a HTML form with a large number of checkboxes - for example, like in a mail program with a list of e-mails, in which each e-mail can be selected - it is useful, to provide a "Select All" feature. Depending on the current state of the check boxes, this function can be used to either check all of the boxes when they are not selected or to uncheck all checkboxes in the case, they are all checked.

In this tutorial, I will show you how you can quickly implement this function with the help of jQuery.

HTML

First, imagine an arbitrary list of checkboxes on an HTML page:

<label><input type="checkbox" name="mails[]" value="1"> Mail 1</label>
<label><input type="checkbox" name="mails[]" value="2"> Mail 2</label>
<label><input type="checkbox" name="mails[]" value="3"> Mail 3</label>
<label><input type="checkbox" name="mails[]" value="4"> Mail 4</label>
 
...
 
<span id="checkall">Select All</span>

Exemplary, here we have the messages 1 to 4 in an inbox. Each box we give the same name mails[] so that on the one hand we can simply access the checkboxes via jQuery and on the other hand the checkboxes can be easily received and evaluated via PHP later. Alternatively, we could of course also assign the same class to all checkboxes, but since we need the name for PHP anyway, we leave it like this.

Somewhere under the list we have our button "Select All". We give it the ID "checkall" so that we can use jQuery to simply assign a function to it. In addition, we can also design the ID "checkall" in CSS, for example, that it looks like a link or a button.

JavaScript: jQuery

Now let's look at our JavaScript/jQuery code where we assign the required function to our button via the ID "checkall" in the second line:

$(document).ready(function() {
    $("#checkall").click(function() {
        var cblist = $("input[name=mails\\[\\]]");
        cblist.attr("checked", !cblist.attr("checked"));
    });                 
});

In the third line, we fetch a list of all the checkboxes named mails[] and store them in the variable "cblist". The escape characters \\ are necessary here so that [ and ] are recognized as part of the name of the checkboxes and not as brackets of the selector.

In the fourth line we finally change the attribute "checked" of all the checkboxes in the list to the opposite of the current state (the ! negates the current state that we have read out via cblist.attr("checked")). Thus, the state of all checkboxes will toggle with every click on "Select All".