• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / How to Uncheck All Checkboxes in JavaScript

How to Uncheck All Checkboxes in JavaScript

August 10, 2022 Leave a Comment

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.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Change the Font Size of a Paragraph
  • 2.  JavaScript onfocus – Changing Form Styles with the onfocus Event
  • 3.  Using JavaScript to Compare Dates
  • 4.  Set Text with the textContent Property in JavaScript
  • 5.  Using JavaScript to Convert Double to Integer
  • 6.  JavaScript cos – Find Cosine of Number in Radians Using Math.cos()
  • 7.  Using JavaScript to Check if String Contains Only Numbers
  • 8.  Sum the Digits of a Number in JavaScript
  • 9.  JavaScript tanh – Find Hyperbolic Tangent of Number Using Math.tanh()
  • 10.  Using JavaScript to Remove Quotes From a String

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy