How to get all checked checkbox value in JavaScript?

A checkbox is a selection box that allows the users to make the binary choice (true or false) by checking and unchecking it. Basically, a checkbox is an icon, which is frequently used in GUI forms and application to get one or more inputs from the user.

If a checkbox is marked or checked, it indicates to true; this means that the user has selected the value.
If a checkbox is unmarked or not checked, it indicated to false; this means that the user has not selected the value.

Remember that checkbox is different from the radio button and dropdown list because it allows multiple selections at once. In contrast, the radio button and dropdown allow us to choose only one from the given options.

In this chapter, now we will see how to get all marked checkbox value using JavaScript.

Create checkbox syntax

To create a checkbox use HTML <input> tab and type="checkbox" inside the tab as shown below -

Although you can also create a checkbox by creating the checkbox object through JavaScript, but this method is a bit complicated. We will discuss both approaches later-

Examples

Create and get checkbox value

In this example, we will create two checkboxes but with the condition that the user will have to mark only one checkbox between them. Then we will fetch the value of the marked checkbox. See the code below:

Copy Code

<html>
<body>

<h2 style="color:green">Create a checkbox and get its value</h2>
<h3> Are you a web developer? </h3>
Yes: <input type="checkbox" id="myCheck1" value="Yes, I'm a web developer">
No: <input type="checkbox" id="myCheck2" value="No, I'm not a web developer">
<br> <br>
<button onclick="checkCheckbox()">Submit</button> <br>

<h4 style="color:green" id="result"></h3> 
<h4 style="color:red" id="error"></h3> 

<script>
function checkCheckbox() {
  var yes = document.getElementById("myCheck1");
  var no = document.getElementById("myCheck2");
  if (yes.checked == true && no.checked == true){
    return document.getElementById("error").innerHTML = "Please mark only one checkbox either Yes or No";
  }
  else if (yes.checked == true){
    var y = document.getElementById("myCheck1").value;
    return document.getElementById("result").innerHTML = y; 
  } 
  else if (no.checked == true){
    var n = document.getElementById("myCheck2").value;
    return document.getElementById("result").innerHTML = n;
  }
  else {
    return document.getElementById("error").innerHTML = "*Please mark any of checkbox";
  }
}
</script>

</body>
</html>

Test it Now

Output

If you mark the Yes checkbox and then click on the Submit button, a message will display as shown below:

How to get all checked checkbox value in JavaScript

If you click on the Submit button without marking any of the checkboxes, an error message will be displayed.

Similarly, you can check the output for other conditions.

Get all checkbox value

Now, you will see how to get all checkbox values marked by the user. See the below example.

Copy Code

<html>
<body>

<h2 style="color:green">Create a checkbox and get its value</h2>
<h4> Select the programming language, you know </h4>
<tr>
<td> Java: <input type="checkbox" id="check1" class="pl" value="Java"> </td>
<td> PHP: <input type="checkbox" id="check2" class="pl" value="PHP"> </td> 
</tr> <tr>
<td> Angular: <input type="checkbox" id="check3" class="pl" value="Angular"> </td>
<td> CSS: <input type="checkbox" id="check4" class="pl" value="CSS"> </td>
</tr> <tr>
<td> Python: <input type="checkbox" id="check5" class="pl" value="Python"> </td>
<td> Android: <input type="checkbox" id="check6" class="pl" value="Android"> </td>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 style="color:green" id="result"></h4>  

<script>
function checkAll() {
        var inputs = document.querySelectorAll('.pl'); 
        for (var i = 0; i < inputs.length; i++) { 
            inputs[i].checked = true; 
        } 
}
function getCheckboxValue() {

  var l1 = document.getElementById("check1");
  var l2 = document.getElementById("check2");
  var l3 = document.getElementById("check3");
  var l4 = document.getElementById("check4");
  var l5 = document.getElementById("check5");
  var l6 = document.getElementById("check6");
   
  var res=" "; 
  if (l1.checked == true){
    var pl1 = document.getElementById("check1").value;
    res = pl1 + ","; 
  } 
  else if (l2.checked == true){
    var pl2 = document.getElementById("check2").value;
    res = res + pl2 + ","; 
  }
  else if (l3.checked == true){
  document.write(res);
    var pl3 = document.getElementById("check3").value;
    res = res + pl3 + ","; 
  }
  else if (l4.checked == true){
    var pl4 = document.getElementById("check4").value;
    res = res + pl4 + ","; 
  }
  else if (l5.checked == true){
    var pl5 = document.getElementById("check5").value;
    res = res + pl5 + ","; 
  }
  else if (l6.checked == true){
    var pl6 = document.getElementById("check6").value;
    res = res + pl6; 
  } else {
  return document.getElementById("result").innerHTML = "You have not selected anything";
  }
  return document.getElementById("result").innerHTML = "You have selected " + res + " languages";
}
</script>

</body>
</html>

Test it Now

Output

By executing this code, we will get a response like the below screenshot having some programming languages where you can choose the language you know.

Here, you click on the Check all button, it will mark all the programming language checkboxes. After that, click on the Submit button to get the response.

Although you can select the language one by one by marking an individual checkbox and then click on the Submit button to get the result.

Output: When you have not selected anything

Get all marked checkboxes value using querySelectorAll() method

There is one more method to get all selected values from the checkboxes marked by the user. You will now see how to get the value of all checkboxes using the querySelectorAll() method marked by the user. This will fetch the checkboxes values from the HTML form and display the result.

Get all checkbox value

Now, you will see how to get all checkbox values marked by the user. See the below example.

Copy Code

<html>
<body>

<h2 style="color:green"> Get all marked checkboxes value </h2>
<h4> Select the programming language, you know </h4>
<tr>
<td> Java: <input type="checkbox" id="check1" name="pl" value="Java"> </td>
<td> PHP: <input type="checkbox" id="check2" name="pl" value="PHP"> </td> 
</tr> <tr>
<td> Angular: <input type="checkbox" id="check3" name="pl" value="Angular"> </td>
<td> CSS: <input type="checkbox" id="check4" name="pl" value="CSS"> </td>
</tr> <tr>
<td> Python: <input type="checkbox" id="check5" name="pl" value="Python"> </td>
<td> Android: <input type="checkbox" id="check6" name="pl" value="Android"> </td> <br> <br>
<button id="btn">Submit</button> <br>
<h4 style="color:green" id="result"></h4>  

<script>
document.getElementById('btn').onclick = function() {
  var markedCheckbox = document.getElementsByName('pl');
  for (var checkbox of markedCheckbox) {
    if (checkbox.checked)
      document.body.append(checkbox.value + ' ');
  }
}
</script>

</body>
</html>

Test it Now

Output

Here, you can see that all marked checkboxes value has been returned.

Different JavaScript codes to get marked checkboxes value

JavaScript Code to get all checked checkbox values

<script>
document.getElementById('btn').onclick = function() {
  var markedCheckbox = document.getElementsByName('pl');
  for (var checkbox of markedCheckbox) {
    if (checkbox.checked)
      document.body.append(checkbox.value + ' ');
  }
}
</script>

You can also use the below code to get all checked checkboxes values.

<script>
document.getElementById('btn').onclick = function() {
  var markedCheckbox = document.querySelectorAll('input[type="checkbox"]:checked');
  for (var checkbox of markedCheckbox) {
    document.body.append(checkbox.value + ' ');
  }
}
</script>

So, checkbox elements allow to multi-select. This means that the users can select one or more options of their choice defined in the HTML form. Even you can select all the checkboxes. In the above example, you have already seen that.

Next TopicHow to open JSON file

← prev next →