Check if Checkbox is Checked in JavaScript

To check if a checkbox is checked in JavaScript, the simplest way is to target the checkbox using a method like getElementById() and then check the checked property of the element to see if it is true or false.

document.getElementById("checkboxInput").checked

We can then put this in an if-else statement.

var isChecked = document.getElementById("checkboxInput").checked;

if( isChecked == true){
  //Checkbox is checked
} else {
  //Checkbox is NOT checked
}

Let’s say we have the following HTML:

<div id="div">
  <input type="checkbox" name="checkbox-set-1" id="checkbox-1" value="Checkbox 1">
  <input type="checkbox" name="checkbox-set-1" id="checkbox-2" value="Checkbox 2" checked>
</div>

If we want to see if the checkboxes are checked, we can use the following code:

var isChecked1 = document.getElementById('checkbox-1').checked;
console.log(isChecked1); 

#Output
false

var isChecked2 = document.getElementById('checkbox-2').checked;
console.log(isChecked2);

#Output
true

Not that we can also easily check if a checkbox is checked using jQuery.

Check if Checkbox is Checked Using JavaScript When Checkbox is Clicked

We can check if a checkbox is checked using JavaScript very easily by checking the checked property with a click event.

Let’s say we have the following HTML code and we want to display the checked value of our checkbox in the span below:

<div id="div1">
  <p>Click the Checkbox to Update the "Checked" status of Checkbox</p>
  <label for="checkbox-set-1">Checkbox </label>
  <input type="checkbox" name="checkbox-set-1" id="checkbox-1" value="Checkbox" onclick="checkCheckbox()">
  <p>The value of the checkbox is: <span id="checkbox-value"></span>.</p>
</div>

We can utilize an onclick event and the getElementById() method to find the value of the checkbox. Then we will change the text of the span and display true or false.

Below is the JavaScript code which will allow us to see if our checkbox is checked and then display that value.

function checkCheckbox(){
  var isChecked = document.getElementById('checkbox-1').checked;
  //Get the checked property value of the checkbox

  document.getElementById("checkbox-value").textContent = isChecked;
  //Display that value to the user
}; 

The final code and output for this example of how to check if a checkbox is checked using Javascript is below:

Code Output:

Full Code:

<div id="div1">
  <p>Click the Checkbox to Update the "Checked" status of Checkbox</p>
  <label for="checkbox-set-1">Checkbox </label>
  <input type="checkbox" name="checkbox-set-1" id="checkbox-1" value="Checkbox" onclick="checkCheckbox()">
  <p>The value of the checkbox is: <span id="checkbox-value"></span>.</p>
</div>

<script>

function checkCheckbox(){
  var isChecked = document.getElementById('checkbox-1').checked;
  document.getElementById("checkbox-value").textContent = isChecked;
}; 

</script>

Hopefully this article has been useful for you to understand how to check if a checkbox is checked in JavaScript.