Select / Deselect All CheckBoxes using jQuery

Gmail has a nice option where you can select and deselect multiple checkboxes (Emails) using the ‘Select All’ checkbox. This feature is used in many other popular web applications as well. In this article, we will create a similar functionality to toggle checkboxes. The idea is that a group of checkboxes exists on a page controlled by a master checkbox. Clicking on the master checkbox selects all checkboxes; and unchecking it, deselects all checkboxes.

Create a new file ‘CheckAllCheckboxes.html’. Set up five checkbox elements in a paragraph with an ID of checkBoxes.

<p id="checkBoxes">
    <input type="checkbox" id="cb1" value="1"/>
    <label for="Checkbox1">Option One</label>
    <br />
    <input type="checkbox" id="cb2" value="2" />
    <label for="Checkbox2">Option Two</label>
    <br />
    <input type="checkbox" id="cb3" value="3" />
    <label for="Checkbox3">Option Three</label>
    <br />
    <input type="checkbox" id="cb4" value="4" />
    <label for="Checkbox4">Option Four</label>
    <br />
    <input type="checkbox" id="cb5" value="5" />
    <label for="Checkbox5">Option Five</label>
    <br />
</p>

Add an input check box with an ID of ckbCheckAll directly before the para. This check box is our master checkbox to control the Select/Deselect of all checkboxes in the paragraph element.

<input type="checkbox" id="ckbCheckAll" />
<label for="ckbCheckAll">Select All</label>

Save and view the page in your browser, and you will see the following screen:

Write the following code:

$(function () {
    var $tblChkBox = $("#checkBoxes input:checkbox");
    $("#ckbCheckAll").on("click", function () {
        $($tblChkBox).prop('checked', $(this).prop('checked'));
    });
});

We start by defining a variable $tblChkBox which will hold a matched set of all checkboxes, inside the para checkBoxes

var $tblChkBox = $("#checkBoxes input:checkbox");

Now add a click event to the master checkbox ckbCheckAll

$("#ckbCheckAll").on("click", function () {
});

And finally we come to the last step to Check/Uncheck all checkboxes when the master checkbox is clicked. To do so, we will use .prop() to toggle the checkbox state:

$("#ckbCheckAll").on("click", function () {
    $($tblChkBox).prop('checked', $(this).prop('checked'));
});

As you might have observed, it’s just a line of code to achieve something using jQuery, which would otherwise take a couple of lines if done in plain JavaScript. We are using .prop( propertyName, value ) where propertyName in our case is ‘checked’ and the value is a Boolean. This allows us to toggle the state of the checkboxes every time the master checkbox is checked/unchecked.

Before jQuery 1.6 was released, developers would use the .attr() method to apply the attribute check to all checkboxes. They would use if and else statements to test if the input ckbCheckAll element is checked or un-checked. If the element is checked, apply the attribute ’checked’,’true’ to all of the check boxes. If the element is not checked, apply the attribute ’checked’,’false’ to all of the checkboxes. From jQuery 1.6 onwards, the documentation recommends that the .prop() method should be used to set disabled and checked, instead of the .attr() method

Uncheck the Master Checkbox when any of the other Checkboxes are unchecked

The purpose of the Master checkbox is to select/deselect all checkboxes at once. What if the user decides to deselect one of the checkboxes?

Ideally when the user deselects any of the checkboxes, the master checkbox should also get deselected. This can be done using the following code:

$("#checkBoxes").on("change", function () {
    if (!$(this).prop("checked")) {
        $("#ckbCheckAll").prop("checked", false);
    }
});

The code checks the change event of the checkboxes to see if any of the check boxes have been unchecked. If yes, uncheck the Master checkbox.

Handling Disabled checkboxes

What if one of the checkboxes in your page is disabled? Ideally you should exclude the disabled checkbox from being checked/unchecked. Make a simple change in your code to exclude disabled checkboxes:

$("#ckbCheckAll").on("click", function () {
    $($tblChkBox).not(":disabled").prop('checked', $(this).prop('checked'));
});

We are using the :not selector to select all checkboxes which are not disabled. I made a small change in the markup to make Option Four disabled

<input type="checkbox" id="cb4" disabled="disabled" value="4" />

Save and browse the page and you will see that the disabled checkbox does not get checked.

Live Demo: http://www.jquerycookbook.com/demos/S2-Input Controls/17-CheckAllCheckboxes.html

If you liked this article, take a look at my jQuery book The Absolutely Awesome jQuery Cookbook which contains scores of practical jQuery/jQueryUI recipes you can use in your projects right away.

Also check out jQuery Checkbox and Radio Button Miscellaneous Tips

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn