313 Votes

jQuery: Toggle Checkboxes (Select/Unselect All)

Tip by Stefan Trost | Last update on 2022-11-17 | Created on 2013-01-10

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.


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".


About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

PHP: Sending an E-Mail

Tutorial | 0 Comments

jQuery: Show and hide elements

Tutorial | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.