Check or Select / Deselect all Checkboxes using jQuery

Either newbie or experienced developer, everyone occasionally needs a quick jQuery snippet that selects and deselects multiple checkboxes by clicking “Select All” checkbox (exactly like in Gmail). Here are two code snippet that perform the same action. You can use either of them.

We are creating two functions (in each code snippet), one to Select / Deselect all Checkboxes on clicking on Select All checkbox and another to check / uncheck it if any of corresponding checkboxes is clicked. You can check the live example here.

First of all let’s create an array of checkboxes:

At top of the list, you can see there is a checkbox with id="checkAll" and label: Select All. The jQuery prop() function will select / Deselect all checkboxes with underlying class chk on clicking on this element.

Nice? In line number 10, we are comparing number of elements in class chk and chk:checked. If both are same then all checkboxes are checked, make the top element checked otherwise no.

The Long Tale: This one below is added as a reference to help understanding in more easier way, while working of the both will be same:

A quick note: The prop() function is not available in jQuery library prior to version 1.6. If you are using older version then use attr() instead of prop(). Also if you wish to add more checkboxes in the list but not intended to select / deselect in the group behaviour, just add them but don’t assign a class or assign a class name except chk:

The complete code to Select / Deselect all Checkboxes using jQuery

Live demo

You Might Interested In


  1. Nikki Parker says:

    This is the most thorough example I have seen for select / deselect all checkboxes using Jquery. Simply for the fact that you deselect the Select All checkbox when one of the other checkboxes is deselected. Most examples don’t include that one important detail. Thanks!


Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.