Select or Deselect all Checkboxes using jQuery

Today, in this short article we’ll share with you a simple code to select or deselect all checkboxes using jQuery. In this article we will create a simple HTML form and try to implement checkboxes for check / uncheck demo.

Steps to select or deselect all checkboxes

  1. Create an HTML form
  2. Include jQuery library
  3. Add script for select/deselect functionality
  4. Output

1. Create an HTML form

Let’s create an HTML form where we will have multiple checkboxes that can be controlled by the Select All checkbox.

Here, we have added the master checkbox with id checkAll to select or deselect all checkboxes and added the other checkboxes with class chk.

2. Include jQuery library

In the next step, we need to include the following jQuery library in the head section.

3. Add script for select/deselect functionality

We’ll use the .prop() method to toggle the checkbox on the click of the Select All checkbox to select / deselect all checkboxes.

After selecting the all the checkbox, the user deselects any of the checkboxes, the master checkbox should be deselected. Similarly, if master checkbox deselect and user select all checkbox one by one then the master checkbox will be selected.

To do this, when the checkbox with class ‘chk’ is clicked, we will check the length of the selected checkbox with class chk and total checkbox with class chk. If both are the same then the master checkbox with id checkAll will be selected otherwise deselected.

4. Output

At the last, combine the all above code and run the page in the browser.

index.html

Output - Select or Deselect all Checkboxes using jQuery - Clue Mediator
Output – Select or Deselect all Checkboxes using jQuery – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *