JavaScript Check if Checkbox is Checked

In this post we are going to work with checkboxes. We will look at how we can check if checkboxes are checked, how we can check them ourselves, how to get the value out of them, and how to clear them.

TL;DR: Here is how you check if a specific checkbox is checked.

function isChecked(id){
    return document.getElementById(id).checked == true;
}

In the rest of the post we will go over many different ways we can work with checkboxes using JavaScript.

Different ways of working with Checkboxes

We already went over how we can use JS to check if a checkbox is checked above, so we will not cover that again. Instead, let us have a look at some more interesting cases that you might find a need for in your own application.

1. Get the values of all checked checkboxes

Lets start by looking at how we can get the values of all the checked boxes. We will have two examples here. One is to see which boxes are checked, and one will be to get the value of the ones that are checked.

Here are some checkboxes that we will use for this example. There are many ways you can group the input elements to make them related, but in this example we will be grouping them by using classes

<div id="exampleContainer1">
    <label><input type="checkbox" class="group1" checked="checked" value="1">Option #1</label>
    <label><input type="checkbox" class="group1" value="2">Option #2</label>
    <label><input type="checkbox" class="group1" checked="checked" value="3">Option #3</label>
    <label><input type="checkbox" class="group1" value="4">Option #4</label>
</div>

Below is the code for retrieving the text of all the selected checboxes.

function getSelectedValues(groupingName){
    var results = [];
    var checkBoxes = document.getElementsByClassName(groupingName);

    for(var i = 0; i < checkBoxes.length; i++){
        if(checkBoxes[i].checked == true){
            results.push(checkBoxes[i].value);
        }
    }

    return results;
}

If you copy the code above into the console and pass in the class name we used for these checkboxes then you will see the following.

Getting the value of all checked checkboxes

2. Check all checkboxes

Next let us have a look at how we can check all the boxes using JS. Often if there are a lot of choices, you might want to let the user just select all of them at once, so it is not uncommon to have an extra button that will automatically tick all the boxes for you.

For this example we will have a series of boxes, and a button that will initiate the process for us, just like you might have in a real world application.

<div id="exampleContainer2">
    <label><input type="checkbox" class="group2" value="1">Option #1</label>
    <label><input type="checkbox" class="group2" value="2">Option #2</label>
    <label><input type="checkbox" class="group2" c value="3">Option #3</label>
    <label><input type="checkbox" class="group2" value="4">Option #4</label>
</div>

<button id="exampleButton2">Check all boxes</button>

Now lets create the JS code that will check all the checkboxes for us. The strategy is to get all the boxes, loop over them, and set the checked state to true.

function checkAllCheckboxes(groupName){
    var all = document.getElementsByClassName(groupName);
    for(var i = 0; i < all.length; i++){
        all[i].checked = true;
    }
}

var button = document.getElementById("exampleButton2");
button.addEventListener("click", function(){
    checkAllCheckboxes("group2");
});

That is all we need to implement a button that will check all the checkboxes for us.

3. Unchecked all checkboxes

Now to uncheck all the checkboxes all we have to do is to set the checked property to false. The idea here is to get all the boxes, loop over them and set the checked property to false.

<div id="exampleContainer3">
    <label><input type="checkbox" class="group3" value="1">Option #1</label>
    <label><input type="checkbox" class="group3" value="2">Option #2</label>
    <label><input type="checkbox" class="group3" c value="3">Option #3</label>
    <label><input type="checkbox" class="group3" value="4">Option #4</label>
</div>

<button id="exampleButton3">Check all boxes</button>

function checkAllCheckboxes(groupName){
    var all = document.getElementsByClassName(groupName);
    for(var i = 0; i < all.length; i++){
        all[i].checked = false;
    }
}

var button = document.getElementById("exampleButton3");
    button.addEventListener("click", function(){
    checkAllCheckboxes("group3");
});

4. Get the count of checked checkboxes

Now that we have seen a few examples it is getting pretty straight forward to start working with checkboxes. In order to find out how many are checked, we have to fist get all of the boxes, loop over them and check if it is checked or not, if it is checked then we will increment our counter.

Below is the code for counting how many boxes are checked.

function checkedCount(groupName){
    var count = 0;
    var allBoxes = document.getElementsByClassName(groupName);
    
    for(var i = 0; i < allBoxes.length; i++){
        count += (allBoxes[i].checked == true)? 1:0;
    }

    return count;
}

If you copy the code above into the console and pass in "group3" from the previous example then you will see the following.

When might you work with checkboxes in real life applications?

Using checkboxes is very common for any application where the user is able to provide some sort of input. For example, you could ask the user to select all the boxes that apply to them in a questionnaire, you could have the user select all the topics they want on their pizza on an online ordering website, and the list goes on and on.

The moral of the story is that you should read through the examples above and try doing them yourself. Being able to work with user input is very important, and checkboxes is a very common input option.

If you want to learn more JS then check out this guide on calling functions from HTML, or this one on returning multiple values from a function.

Last Updated: by Ole Larsen