January 14, 2016

How to Check All Checkboxes in JavaScript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to check all checkboxes in javascript. An input element can be of various types and checkbox is one of them. It is generally used to provide a limited number of options to a user.

By default, a checkbox is always unchecked. However, we can change its default status to checked by using the checked attribute.

If you have multiple checkboxes, then checking all checkboxes one by one could be time-consuming for a user and that is why you may want to provide some sort of option to check all checkboxes in one go.

A checkbox has checked property. This property returns a Boolean value depending upon the status of the checkbox. Also, it can be used to check or uncheck the checkbox.

To accomplish our goal, we can loop through all the checkboxes with the help of for loop and check all of them by using the checked property.

In the following example, we are going to check all checkboxes dynamically upon button click. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, label, and button). The div element with a class of container is just a wrapper for the rest of the elements.
The innerText for the button element is “Check All”.

We have multiple checkboxes and by default, they are all unchecked. We are going to check all of them with the help of javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>

  <div class="container">
    <button>Check All</button>
    <div>
      <input type="checkbox" id="javascript" value="javascript">
      <label for="javascript">I like Javascript</label>
    </div>
    <div>
      <input type="checkbox" id="python" value="python">
      <label for="python">I like Python</label>
    </div>
    <div>
      <input type="checkbox" id="react" value="react">
      <label for="react">I like React</label>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>

.container {
    width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

button, input  {
  padding: 5px 10px;
  margin-bottom: 20px;
}

Javascript

We have selected all the input elements using the document.querySelectorAll() method and stored them in checkboxes variable.
We have selected the button element using the document.querySelector() method and stored it in btn variable.

We have attached the click event listener to the button element.
In the event handler function, we are using for loop to loop through all the checkboxes one by one. Inside the loop, we are setting checked property to true for each checkbox.

let checkboxes = document.querySelectorAll("input[type='checkbox']");
let btn = document.querySelector("button");

btn.addEventListener("click", () => {
  
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = true;
  }
});

You May Also Like: