January 14, 2016

How to Uncheck All Checkboxes Using JavaScript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to uncheck all checkboxes in javascript. A checkbox by default is always unchecked, but we can make use of the checked attribute to change its status to checked.

If you have multiple checkboxes, then unchecking 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 uncheck all checkboxes in one go.

A checkbox is created by setting the type of input element to a checkbox. This input element 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 uncheck all of them by using the checked property.

In the following example, we are going to uncheck 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 “Uncheck All”.
We have multiple checkboxes and by default, they are all checked. We are going to uncheck 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>Uncheck All</button>
    <div>
      <input type="checkbox" id="javascript" value="javascript" checked>
      <label for="javascript">I like Javascript</label>
    </div>
    <div>
      <input type="checkbox" id="python" value="python" checked>
      <label for="python">I like Python</label>
    </div>
    <div>
      <input type="checkbox" id="react" value="react" checked>
      <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 the checked property to false 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 = false;
  }
});

You May Also Like: