How To Get All Checked Checkbox Value In Javascript

In this article, you will learn how to get all checked checkbox value in Javascript. We will cover all use cases of checkboxes and get their data in Javascript.

Checkboxes are boxes that are used to select or deselect an option. They are generally used in forms, such as checkboxes in a form to select a single option or multiple options.

They are different from radio buttons in which only one option can be selected at a time. Checkboxes can be used to select multiple options.

Checkbox is an input element with type="checkbox". They have a name attribute that is used to group multiple checkboxes for one purpose and a value attribute that is used to store the value of the checkbox.

<input type="checkbox" name="subject" value="math">

You can use the name property to select all checkboxes of the same group.

Table Of Contents

1. Selecting All Checkboxes In A Group
2. Selecting Checked Checkboxes Of A Group
   1. Selecting using checked property of checkbox
   2. Selecting using CSS selector :checked
3. Select All Checkboxes Of Entire Document

Selecting All Checkboxes In A Group

To select all checkboxes of a group you can use their name attribute.

To select an element by element's name attribute you can use document.getElementsByName() method. It returns an array of elements with the specified name attribute.

In the example below, we are selecting all checkboxes of a group with a single click of a button and storing their values in an array.

<p>Choose Language you can work with:</p>
<input type="checkbox" name="language" value="HTML"> HTML<br>
<input type="checkbox" name="language" value="CSS"> CSS<br>
<input type="checkbox" name="food1" value="Milk"> Milk (food)<br>
<input type="checkbox" name="language" value="JavaScript"> JavaScript<br>
<input type="checkbox" name="language" value="PHP"> PHP<br>
<input type="checkbox" name="language" value="Python"> Python<br>
<input type="checkbox" name="food" value="vegetable"> Vegetable (food)<br>
<input type="checkbox" name="language" value="Ruby"> Ruby<br>
<button onclick="selectAll()">Select All</button>

<script>
  function selectAll() {
    // selecting all checkboxes
    // of group language
    var checkboxes = document.getElementsByName('language');
    var values = [];
    // looping through all checkboxes
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = true;
      values.push(checkboxes[i].value);
    }
    alert(values);
  }
</script>

You can see in the output below only checkboxes that belong to the group language are selected.

Output:

Another way to select checkboxes of a group is by using the querySelectorAll() method. It returns a NodeList of elements with the specified name attribute.

To select checkboxes of group language you can apply document.querySelectorAll('input[name="language"]').

// selecting all checkboxes
// of group language using querySelectorAll()
var checkboxes = document.querySelectorAll('input[name="language"]');
var values = [];
// looping through all checkboxes
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].checked = true;
  values.push(checkboxes[i].value);
}
alert(values);

Output

Selecting Checked Checkboxes Of A Group

When the user has given their choice in the checkboxes then you need to get those data and perform some action on it.

To get all checked checkboxes values in Javascript you can follow 2 ways:

1. Selecting using the checked property of checkbox.
2. Selecting using CSS selector :checked.

1. Selecting using the checked property of the checkbox

To select all checked checkboxes of a group first select all checkboxes of a group and then loop through all checkboxes and get their checked property value.

If the return value is true then the checkbox is checked. You can store it in an array for further use.

// selecting all checkboxes
// of group language using querySelectorAll()
var checkboxes = document.querySelectorAll('input[name="language"]');
var values = [];
// looping through all checkboxes
// if checked property is true then push
for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked == true) {
    values.push(checkboxes[i].value);
  }
}
alert(values);

Output:

2. Selecting using CSS selector :checked

There is another way to select all checked checkboxes of a group. It is by using a CSS selector.

:checked is a pseudo CSS selector which can select the checkbox which is checked.

Use this with the querySelectorAll() method to select all checkboxes of a group.

// selecting all checkboxes
// of group language using :checked pseudo selector
var checkboxes = document.querySelectorAll('input[name="language"]:checked');

// get values of all checked checkboxes
var values = [...checkboxes].map(checkbox => checkbox.value);
alert(values);

Output:

Select All Checkboxes Of Entire Document

There will be a similar approach to select all checkboxes of the entire document. Here instead of targeting a group of checkboxes, we will target all checkboxes of the entire document.

While using the querySelectorAll() method we can target all checkboxes of the entire document by using selector input:checked.

// selecting all checkboxes
// of entire document using querySelectorAll()
var checkboxes = document.querySelectorAll('input:checked');

// get values of all checked checkboxes
var values = [...checkboxes].map(checkbox => checkbox.value);
alert(values);

Output:

Conclusions

In this short guide, we have seen how to select all checked checkboxes value in JavaScript with different case scenarios. Like selecting all checkboxes of a group, selecting all checked checkboxes of a group, selecting all checked checkboxes of the entire document, etc.