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.
Have a go at ticking the checkboxes to see what happens.
| Name | Address | |
|---|---|---|
| John Smith | 3 Main Street | |
| Paul Jones | 25 Green Court | |
| Sarah Grant | 93 The Drive | |
| Richard Dean | 14 Walter Place | |
STEP 1
First, we create a basic HTML5 template:
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.
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).
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.
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.
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.
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 table 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. Notice how the top checkbox will automatically be checked when you check the checkbox for Sarah Grant.
| Name | Address | |
|---|---|---|
| John Smith | 3 Main Street | |
| Paul Jones | 25 Green Court | |
| Sarah Grant | 93 The Drive | |
| Richard Dean | 14 Walter Place | |
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.
