Check and Uncheck all Checkboxes using jQuery

Deselect & Select All Checkbox jQuery (Check/Uncheck All)

by

In this article about jQuery, we’ll try to provide you with a simple code to check and uncheck all checkboxes using jQuery that means users will be able to unselect/select all checkboxes altogether with just a single click. Here we will first create a HTML form and try to implement checkboxes for select/deselect checkboxes in demo.

Steps to follow:

Step 1: Create HTML Form with Multiple Select Tags

Here we are creating a HTML form where we will be having multiple checkboxes that can be handled by a single checkbox, ‘Select ALL’ to select/deselect all the boxes at once

<form method="post" action="form.php">
   <span>Deselect  or Select all Checkboxes withjQuery </span>
   <label><input type="checkbox" id="checkAll" />Select All</label>
   <label><input class="select" type="checkbox" name=item[] value="1" />Car</label><br/>
   <label><input class=" select " type="checkbox" name=item[] value="2" />Bike</label><br />
   <label><input class=" select " type="checkbox" name=item[] value="3" />Aeroplane</label><br />
   <label><input class=" select " type="checkbox" name=item[] value="4" />Ship</label><br />
   <label><input class=" select " type="checkbox" name=item[] value="5" />Hoverboard</label>
</form>

First of all, we have added one primary checkbox with id ‘checkAll’ and inside it we have added all the other checkboxes with class name ‘select’.

Step 2: Including jQuery Library Script Tag

Now in this step, we need to include the following jQuery library in the head section of our code.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Step 3: Adding Script for Deselect/Select All Functionality in HTML

Here we are using the prop() method which sets or returns properties and values of the selected elements.
So, by using prop() if we click on ‘Select All’ checkbox all the checkboxes will be selected.

<script>
  $(document).ready(function () {
    $("#checkAll").change(function () {
      $("input:checkbox").prop('checked', $(this).prop("checked"));
    });
  });
</script>

After this if a user wishes to deselects any of the checkboxes, the main checkbox with id ‘checkAll’ should also be deselected. Similarly, if the user wishes to deselect the main checkbox and select rest all checkboxes one by one then the main checkbox should also get selected.
So, for this we will check the length of the selected checkbox with class ‘select’ and total checkbox with class select. If both are the same then the main checkbox with id ‘checkAll‘ will be selected otherwise deselected.

<script>
    $(document).ready(function () {
      $("#checkAll").change(function () {
        $("input:checkbox").prop('checked', $(this).prop("checked"));
      });
      $('.select').on('click', function () {
        if ($('.select:checked').length == $('.select').length) {
          $('#checkAll').prop('checked', true);
        } else {
          $('#checkAll').prop('checked', false);
        }
      });
    });
</script>

Output & Final File

Finally, combine all the above code and run the index file in the browser.

File name: index.html
<!DOCTYPE html>
<html>
   <head>
      <title>Select or Deselect all Checkboxes using jQuery - CodingIsEasy.com</title>
      <script src="https://code.jquery.com/jquery-3.5.1.min.js"
         integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
      <script>
         $(document).ready(function () {
           $("#checkAll").change(function () {
             $("input:checkbox").prop('checked', $(this).prop("checked"));
           });
           $('.select').on('click', function () {
             if ($('.select:checked').length == $('.select').length) {
               $('#checkAll').prop('checked', true);
             } else {
               $('#checkAll').prop('checked', false);
             }
           });
         });
      </script>
   </head>
   <body>
      <form method="post" action="form.php">
         <span>Deselect  or Select all Checkboxes withjQuery </span>
         <label><input type="checkbox" id="checkAll" />Select All</label>
         <label><input class="select" type="checkbox" name=item[] value="1" />Car</label><br/>
         <label><input class=" select " type="checkbox" name=item[] value="2" />Bike</label><br />
         <label><input class=" select " type="checkbox" name=item[] value="3" />Aeroplane</label><br />
         <label><input class=" select " type="checkbox" name=item[] value="4" />Ship</label><br />
         <label><input class=" select " type="checkbox" name=item[] value="5" />Hoverboard</label>
      </form>
   </body>
</html>

Leave a Comment