• 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 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.  Using JavaScript to Resize an Image
  • 2.  Using JavaScript to Reverse an Array
  • 3.  Remove the First and Last Character From a String in JavaScript
  • 4.  Using JavaScript to Multiply All Elements in an Array
  • 5.  clearInterval JavaScript – How the clearInterval() Method in JavaScript Works
  • 6.  outerHTML – How to Get and Change the outerHTML Property of an Element
  • 7.  JavaScript substring – How to Get a Substring From a String
  • 8.  Remove String From Array in JavaScript
  • 9.  Using JavaScript to Stop a Timer
  • 10.  Using JavaScript to Insert Item Into Array

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