How to Uncheck All Checkboxes in JavaScript

To uncheck all checkboxes in JavaScript, the simplest way is to target the input elements and change their checked property to false.

Let’s first go over how to set a checkbox input checked property to false using JavaScript.

document.getElementById("checkboxInput").checked = false;

There are many ways we can target an element, we used the getElementById() method above.

Now let’s look at how to set all checkboxes to unchecked using JavaScipt.

Let’s say we have the following HTML form:

<form>
  <input name="food" type="checkbox" id="pasta" value="pasta" checked>
  <label for="pasta"> I like pasta</label>
  <input name="food" type="checkbox" id="seafood" value="seafood" checked>
  <label for="seafood"> I like seafood</label>
  <input name="food" type="checkbox" id="hamburgers" value="hamburgers" checked>
  <label for="hamburgers"> I like hamburgers</label>
  <input type="submit" value="Submit">
</form>

To start, all of the checkboxes in the form above will be set to checked. To set them all to unchecked, we would need to target them all using the getElementsByName() method, and then loop through the collection of inputs and set each one’s checked property to false.

Let’s see the JavaScript code to do this below:

var allFoodCheckboxes = document.getElementsByName("food");
for( var i=0; i< allFoodCheckboxes.length; i++){
  allFoodCheckboxes[i].checked = false;
}

If we want to check all checkboxes using JavaScript, we simply need to just change the checked property value in our code above to true.

var allFoodCheckboxes = document.getElementsByName("food");
for( var i=0; i< allFoodCheckboxes.length; i++){
  allFoodCheckboxes[i].checked = true;
}

Note that selecting all checkboxes and setting them to unchecked can be easily done using jQuery.

Select All Checkboxes and set them to Unchecked in JavaScript Using a Click

We can uncheck all checkboxes in a form using JavaScript very easily by combining our code above with an onclick event.

In our HTML, we will have a simple form with 3 items, and a Select All checkbox that will allow us to set all checkboxes to unchecked.

<form>
  <input type="checkbox" id="selectAll" name="selectAll" value="selectAll" onclick="selectAll()" checked>
  <label for="selectAll"> Select All</label>
  <input name="food" type="checkbox" id="pasta" value="pasta" checked>
  <label for="pasta"> I like pasta</label>
  <input name="food" type="checkbox" id="seafood" value="seafood" checked>
  <label for="seafood"> I like seafood</label>
  <input name="food" type="checkbox" id="hamburgers" value="hamburgers" checked>
  <label for="hamburgers"> I like hamburgers</label>
  <input type="submit" value="Submit">
</form>

We have added an onclick event to the selectAll checkbox that will run a function called unselectAllCheckboxes(). This function will have our code above to set all checkboxes to unchecked.

To check all checkboxes, we will simply need to change the checked property to true. To know whether to check or uncheck all checkboxes, we will have see if the selectAll checkbox is checked.

Here is our unselectAllCheckboxes() function below:

function unselectAllCheckboxes(){
  var isChecked = document.getElementById("selectAll");
  //Get the value of the selectAll checkbox

  //If it is checked, then we will check all checkboxes in the form
  //Otherwise we will uncheck all checkboxes
  if( isChecked.checked == true ){
    var allFoodCheckboxes = document.getElementsByName("food");
    for( var i=0; i< allFoodCheckboxes.length; i++){
      allFoodCheckboxes[i].checked = true;
    }
  } else {
    var allFoodCheckboxes = document.getElementsByName("food");
    for( var i=0; i< allFoodCheckboxes.length; i++){
      allFoodCheckboxes[i].checked = false;
    }    
  }
};

The final code and output for this example of how to set all checkbox to checked using JavaScript is below:

Code Output:

Full Code:

<form>
  <input type="checkbox" id="selectAll" name="selectAll" value="selectAll" onclick="unselectAllCheckboxes()" checked>
  <label for="selectAll"> Select All</label>
  <input name="food" type="checkbox" id="pasta" value="pasta" checked>
  <label for="pasta"> I like pasta</label>
  <input name="food" type="checkbox" id="seafood" value="seafood" checked>
  <label for="seafood"> I like seafood</label>
  <input name="food" type="checkbox" id="hamburgers" value="hamburgers" checked>
  <label for="hamburgers"> I like hamburgers</label>
  <input type="submit" value="Submit">
</form>

<script>

function unselectAllCheckboxes(){
  var isChecked = document.getElementById("selectAll");
  if( isChecked.checked == true ){
    var allFoodCheckboxes = document.getElementsByName("food");
    for( var i=0; i< allFoodCheckboxes.length; i++){
      allFoodCheckboxes[i].checked = true;
    }
  } else {
    var allFoodCheckboxes = document.getElementsByName("food");
    for( var i=0; i< allFoodCheckboxes.length; i++){
      allFoodCheckboxes[i].checked = false;
    }    
  }
};

</script>

Hopefully this article has been useful for you to understand how to uncheck all checkboxes in JavaScript.