• Skip to primary navigation
  • Skip to main content

The Programming Expert

Solving All of Your Programming Headaches

  • Home
  • Learn to Code
    • Python
    • JavaScript
  • Code Snippets
    • HTML
    • JavaScript
    • jQuery
    • PHP
    • Python
    • SAS
    • Ruby
  • About
  • Write for Us
You are here: Home / JavaScript / How to Select All Checkboxes in JavaScript

How to Select All Checkboxes in JavaScript

August 10, 2022 Leave a Comment

To select all checkboxes in JavaScript and set them to checked, the simplest way is to target the input elements and change their checked property to true.

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

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

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 checked using JavaScipt.


Let’s say we have the following HTML form:

<form>
  <input name="food" type="checkbox" id="pasta" value="pasta">
  <label for="pasta"> I like pasta</label>
  <input name="food" type="checkbox" id="seafood" value="seafood">
  <label for="seafood"> I like seafood</label>
  <input name="food" type="checkbox" id="hamburgers" value="hamburgers">
  <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 unchecked. To set them all to checked, 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 true.

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 = true;
}

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

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

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

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

We can check 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 checked.

<form>
  <input type="checkbox" id="selectAll" name="selectAll" value="selectAll" onclick="selectAllCheckboxes()">
  <label for="selectAll"> Select All</label>
  <input name="food" type="checkbox" id="pasta" value="pasta">
  <label for="pasta"> I like pasta</label>
  <input name="food" type="checkbox" id="seafood" value="seafood">
  <label for="seafood"> I like seafood</label>
  <input name="food" type="checkbox" id="hamburgers" value="hamburgers">
  <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 selectAllCheckboxes(). This function will have our code above to set all checkboxes to checked, and also uncheck them all.

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

Here is our selectAllCheckboxes() function below:

function selectAllCheckboxes(){
  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="selectAllCheckboxes()">
  <label for="selectAll"> Select All</label>
  <input name="food" type="checkbox" id="pasta" value="pasta">
  <label for="pasta"> I like pasta</label>
  <input name="food" type="checkbox" id="seafood" value="seafood">
  <label for="seafood"> I like seafood</label>
  <input name="food" type="checkbox" id="hamburgers" value="hamburgers">
  <label for="hamburgers"> I like hamburgers</label>
  <input type="submit" value="Submit">
</form>

<script>

function selectAllCheckboxes(){
  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 select all checkboxes and set them to checked in JavaScript.

Other Articles You'll Also Like:

  • 1.  parseInt() JavaScript – Convert String to Integer with parseInt() method
  • 2.  JavaScript Trig – How to Use Trigonometric Functions in Javascript
  • 3.  JavaScript onkeyup – How to Use onkeyup Event with JavaScript
  • 4.  How to Split a Number into Digits in JavaScript
  • 5.  Using JavaScript to Get the Height of an Element
  • 6.  Creating a JavaScript Function to Subtract Two Numbers
  • 7.  How to Count Vowels in a String Using JavaScript
  • 8.  How to Repeat Character N Times in JavaScript
  • 9.  Get the Sum of Array in JavaScript
  • 10.  Using JavaScript to Return 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 *

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