How to Use jQuery to Select and Deselect all Checkboxes

When managing records from a database or selecting items in a form it is often handy to be able to select and deselect multiple checkboxes via a single checkbox or button. In this lesson we use jQuery to do just that!

We will use an example of records pulled from a database and presented in a table with a checkbox against each record. 

Checkbox example with jQuery

STEP 1

First, we create a basic HTML5 template:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Checkbox Example</title>
       </head>
   <body>

   </body>
</html>

STEP 2

Now we can add the link to the stylesheet and jQuery.

For simplicity I am just going to use a Bootstrap css file (see line 6).

On line 7 we have provided a link to a separate javascript file. This is where we will place the jQuery code.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Checkbox Example</title>
      <link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="checked.js"></script>
   </head>
   <body>
     
   </body>
</html>

STEP 3

We can now add the HTML code to create the list of records (we won't pull them from a database...we will just imagine they have already come from a database request).

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Checkbox Example</title>
      <link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="checked.js"></script>
   </head>
   <body>
      <table class="table table-bordered">
         <tr><th class="text-center info"><input type="checkbox" name="checkAll" class="checkAll"></th><th class="info">Name</th><th class="info">Address</th></tr>
         <tr>
            <td class="text-center"><input type="checkbox" name="customer" class="checkboxes" value="1" ></td>
            <td>John Smith</td>
            <td>3 Main Street</td>
         </tr>
         <tr>
            <td class="text-center"><input type="checkbox" name="customer" class="checkboxes" value="2" ></td>
            <td>Paul Jones</td>
            <td>25 Green Court</td>
         </tr>
         <tr>
            <td class="text-center"><input type="checkbox" name="customer" class="checkboxes" value="3" ></td>
            <td>Sarah Grant</td>
            <td>93 The Drive</td>
         </tr>
         <tr>
            <td class="text-center"><input type="checkbox" name="customer" class="checkboxes" value="4" ></td>
            <td>Richard Dean</td>
            <td>14 Walter Place</td>
         </tr>
         <tr>
            <td colspan="3"><button class="btn btn-sm btn-danger">DELETE</button></td>
         </tr>
      </table>
   </body>
</html>

Line 12: this is the table header line. Within the first cell of this line we have added a checkbox with a class of 'checkAll' which will be used in the jQuery code.

Lines 13 - 33: rows and cells for 4 individual records, each with their own checkbox.

Line 35: we have added a delete button. This will not be active in our example but you could write appropriate code to take care of the deletion of checked records.

STEP 4

We can now start the jQuery code.

The first thing to do is to ensure that the code is only called once the page is loaded and ready.

$(function(){
   
});

STEP 5

We will now tackle the main checkAll checkbox and write the code to check all other boxes once this is checked.

We start with a reference to the checkAll class and call a function once this has been clicked.

$(function(){
   $('.checkAll').click(function(){
      
   });
});

STEP 6

We now have an if else statement. If the property of the main checkbox has been checked then we change the checked status of all other checkboxes with the 'checkboxes' class to true, else we set to false.

$(function(){
   $('.checkAll').click(function(){
      if (this.checked) {
         $(".checkboxes").prop("checked", true);
      } else {
         $(".checkboxes").prop("checked", false);
      }	
   });
});

We could stop here. However, it would be nice to consider what would happen if the user individually selected all of the checkboxes. Once they have all been selected then, ideally, we should automatically set the checked property of the main checkbox to true.

STEP 7

In order to automatically set the checked property of the main checkbox we need to know if all of the other checkboxes have been selected.

We need to test if the number of checked checkboxes is equal to the total number of checkboxes. If this is true then all checkboxes are selected and we can check the main checkbox.

For example, in the image below we can see that 3 checkboxes have been selected but there are 4 checkboxes in total (those with the checkboxes class). In this case we do not want the top checkbox to be set to checked.

Checkboxes with jQuery

$(function(){
   $('.checkAll').click(function(){
      if (this.checked) {
         $(".checkboxes").prop("checked", true);
      } else {
         $(".checkboxes").prop("checked", false);
      }	
   });

   $(".checkboxes").click(function(){
      var numberOfCheckboxes = $(".checkboxes").length;
      var numberOfCheckboxesChecked = $('.checkboxes:checked').length;
      if(numberOfCheckboxes == numberOfCheckboxesChecked) {
         $(".checkAll").prop("checked", true);
      } else {
         $(".checkAll").prop("checked", false);
      }
   });
});

Line 10: we check if any of the checkboxes with a class of checkbox have been clicked. If so then we run the function.

Line 11: we declare a variable called numberOfCheckboxes. This is simply set to the number of checkboxes with a class of checkboxes.

Line 12: we declare a variable called numberOfCheckboxesChecked. This is set to the number of checkboxes which have been checked.

Line 13: we can now check if the above 2 values are equal.

Line 14: if they are then we can set the main checkbox property to checked.

Line 16: if the 2 values are not equal (from line 13) then we set the checked property of the main checkbox to false.

Want to Learn More?

Become a member and get access to the member only area of this site here.

Comments

Your email address will not be published.

PHP for Beginners

Enrol in the full course here

PHP, MySQL and PDO

Coming soon, a full course on using PHP, MySQL and PDO. Be notified as soon as the course goes live.