April 9, 2019

How to Check and Uncheck All Checkboxes using Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to check and uncheck all checkboxes using javascript. Whenever we want to provide a limited number of choices to a user, we make use of either radio buttons or checkboxes.

Radio buttons are used whenever you want a user to choose only one option out of the given options. On the other hand, the checkboxes are used when a user can choose single or multiple options out of given options.

A checkbox has 2 states, check or uncheck. We can easily toggle the state of a checkbox dynamically using javascript. Each checkbox has a checked property and this property returns a Boolean value depending upon the state of the checkbox. We can also use this property to change the state of the checkbox.

Toggling the state of a single checkbox is easy, but to do the same for multiple checkboxes can be a little tricky. We will use the forEach() loop and checked property to accomplish our goal.

In the following example, we have multiple checkboxes. Depending upon the state of the first checkbox, we will check or uncheck rest of the checkboxes. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, input, and label).
The div element is just a wrapper for the rest of the elements. We are using style attribute just to center align all elements horizontally.

The first checkbox has a label of “All”. Depending upon the state of this checkbox, we will toggle the state of the rest of the checkboxes.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div style="text-align: center;">
        <input type="checkbox" name="all" id="all" value="all"> <label for="all">All</label>
        <input type="checkbox" name="apple" id="apple" value="apple"> <label for="apple">Apple</label>
        <input type="checkbox" name="orange" id="orange" value="orange"> <label for="orange">Orange</label>
        <input type="checkbox" name="mango" id="mango" value="mango"> <label for="mango">Mango</label>
        <input type="checkbox" name="grapes" id="grapes" value="grapes"> <label for="grapes">Grapes</label>
    </div>
    <script src="script.js"></script>

</body>

</html>

Javascript

We have selected the first checkbox using the document.getElementById () method and stored it in all variable.
We have attached the click event listener to it.
We have toggle() method and this method will act as our event handler function.

In the toggle() method, we are getting the state of the first checkbox and storing it in the isChecked variable. This variable holds a Boolean value. For checked, it will be true and for unchecked, it will be false.
We have selected all the checkboxes using the document.getElementsByTagName() method. This method returns a node list.
We are converting that node list into an array by using the Array.from() method.

We are using the forEach() loop to loop through each element in the array. Inside the loop, we are assigning the value of isChecked variable to the checked property of each element.
We want to uncheck the first checkbox whenever we change the state of any other checkbox by clicking on it. To achieve that we have to attach a click event listener to all the checkboxes except the first one as soon as the javascript file is loaded.
We are attaching click event listener to rest of the checkboxes by using document.querySelectorAll(), Array.from() and forEach() loop.

The event handler function is the uncheckAll() method. Inside this method, we are simply unchecking the first checkbox by setting its checked property to false.

const all = document.getElementById('all');

all.addEventListener('click', toggle);


function toggle(){
    const isChecked = all.checked;
    Array.from(document.getElementsByTagName('input')).forEach(element =>{
        element.checked = isChecked; 
    });
}


Array.from(document.querySelectorAll('input:not(#all)')).forEach(element =>{
    element.addEventListener('click', uncheckAll);
});

function uncheckAll(){
    all.checked = false
}

You May Also Like: