How to Check and Uncheck All Checkboxes Using JavaScript

There can be a situation where all the checkboxes need to be checked or unchecked in the case of any questionnaire or quiz. For instance, it is required to make multiple selections from a specific items list or make no selection at all, or when you have to select or clear the selected options in a form in one go. In such cases, checking and unchecking all checkboxes using JavaScript becomes very handy and timesaving.

This article will demonstrate the methods for checking and unchecking all checkboxes using JavaScript.

How to Check and Uncheck All Checkboxes using JavaScript?

To check and uncheck all checkboxes in JavaScript, you can apply:

• “document.getElementsByName” method with Checkboxes
• “document.getElementsByName” method with Buttons

The mentioned approaches will now be discussed one by one!

Method 1: Check and Uncheck All Checkboxes in JavaScript Using “document.getElementsByName()” Method With “Checkboxes”

The “document.getElementsByName()” method returns the elements with the specified name in its arguments. This method will be applied to fetch the value of each checkbox with the help of the passed name.

Let’s go through the following example for demonstration.

Example

First, the input type will be specified as “checkbox” and a specific name and value will be assigned against each checkbox:

Now, include an additional checkbox with the value “Check All” and attach an “onclick()” event with this checkbox which will work in such a way when the checkbox will be clicked, the “checkUnchecked()” method will be invoked with the object “this” as an argument:

After that, define a function named “checkUncheck()” in the JavaScript file, with a variable named “checkBox” as an argument. Now, access the checkbox values using the “document.getElementsByName()” method and place the value of the “name” attribute as its argument.

Lastly, apply a “for” loop to iterate along all the checkbox values and utilize the “checked” property to mark them all as checked:

As you can see, when the “Check All” checkbox is marked, all of the other checkboxes are also marked as checked:

Method 2: Check and Uncheck All Checkboxes in JavaScript Using “document.getElementsByName()” Method With “Buttons”

The “document.getElementsByName()” method, as discussed in the previous method, fetches the elements with the specified name in its arguments. It can be utilized to check or uncheck all of the added checkboxes on a web page.

Look at the following example for demonstration.

Example

Now, we will include two buttons for both the “Checks All” and “Uncheck All” functionalities. Then, attach an “onclick” event with both button which will access the specified functions separately:

Next, define a function named “check()” and apply the “document.getElementsByName” method with the specified value of the “name” attribute. Then, iterate the “for” loop along all the checkbox values discussed in the previous method.

Moreover, when the associated button is clicked, the “checked” property will mark all of the checkboxes and set the checked state as “true”:

Next, define a function named “unCheck()”, and add the reverse functionality in it to mark the checked box property as “false”:

It can see in the output that the added buttons are working perfectly:

We have provided the easiest methods to check and uncheck all checkboxes using JavaScript.

Conclusion

For checking and unchecking all the checkboxes using JavaScript, use the “document.getElementsByName()” method with “Checkboxes” to add a checkbox and access the function, which will result in getting the checkboxes checked or apply the same method with “Buttons” to include two buttons separately for checking and unchecking all the specified values. This write-up explained the methods for checking and unchecking all the checkboxes using JavaScript.