How to Select All Checkboxes in JavaScript

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.