DotNetCurry Logo

Select / Deselect All CheckBoxes using jQuery

Posted by: Suprotim Agarwal , on 4/8/2016, in Category jQuery and ASP.NET
Views: 9403
Abstract: To Select or Deselect Checkboxes using jQuery, all you need to do is use the prop() method along with the change event to achieve the requirement in a couple of lines of code.

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:

s4-checkboxall

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?

s4-checkbox-deselect

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.

s4-checkbox-disabled

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

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on Google+
Further Reading - Articles You May Like!
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 a new one recently at The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

Get in touch with him on Twitter @suprotimagarwal, LinkedIn or befriend him on Facebook



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!