How to implement select all function for multiple sets of checkbox items on the same webpage using simple JavaScript

When designing a webpage with list of checkbox items, it is common and useful to implement a Select All/None function so that the user can easily select/unselect all items with a single mouse click.

This can be done with a simple JavaScript function, even without the need of using jQuery.

Now, the challenge is, when you have multiple sets of checkbox items on the same webpage, how to implement a shared JavaScript function to handle the Select All/None action to each set of the items respectively, so that when the user Select All in one of the sets, the other sets will remain unaffected by the action?

Let's say, we have 3 sets of item as below:

You can use separate FORM for each of the sets, and use FORM ID to distinguish each of the FORM. Each FORM will need to handle their own SUBMIT action separately.

If the different sets are within the same FORM and share the same SUBMIT action, you can make use of CLASS name in their CHECKBOX elements to distinguish and separate out the sets.

Here is the JavaScript codes to implement the Select All/None function (click the image to enlarge it):

and below is the HTML BODY part of the sample webpage (click the image to enlarge it):

Set 1 is in separate FORM from Set 2 and Set 3 with a different FORM ID. Note that even though Set 1 and Set 2 are both using the same CHECKBOX CLASS name, their checkboxes will can be selected all/none separately.

Set 2 and Set 3 are within the same FORM. We can still separate them by using different CHECKBOX CLASS names.

Our simple checkAll JavaScript function accepts both the FORM ID (as 1st parameter) and CLASS NAME (as 2nd parameter), and making use of its 3rd parameter as toggle. In this way, you can use this checkAll function to handle all the sets on the same webpage.

You can create a HTML file to try it out. Since this is just an ordinary HTML with simple JavaScript, it can run even without any web server. Just create the HTML, and open it with your web browser to test it out.