How to know if a checkbox is checked in Vanilla JavaScript
This article will show you how to check if a checkbox is checked in regular JavaScript.
When I was googling this topic, I saw that most of the results showed how to use JQuery to verify checkboxes.
After some research, I discovered that it was very easy to do this in Vanilla JavaScript. I’m not a big fan of using huge libraries just to solve a simple thing.
So, let’s get to it.
Take a look at this simple HTML page:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox</title>
</head>
<body>
<h1>Checkbox Test</h1>
<input type="checkbox" id="checkbox1" name="checkbox1" class="checkbox" value="Checkbox 1" checked>
<label for="checkbox1"> Checkbox 1</label><br>
<input type="checkbox" id="checkbox2" name="checkbox2" class="checkbox" value="Checkbox 2">
<label for="checkbox2"> Checkbox 2</label><br>
<input type="checkbox" id="checkbox3" name="checkbox3" class="checkbox" value="Checkbox 3">
<label for="checkbox3"> Checkbox 3</label><br>
<script src="app.js"></script>
</body>
</html>A script-tag with a reference to an app.js file is added at the end of the <body> tag.
The app.js file looks like this:
// app.js
let checkbox1 = document.querySelector('#checkbox1').checked;
let checkbox2 = document.querySelector('#checkbox2').checked;
let checkbox3 = document.querySelector('#checkbox3').checked;
console.log("checkbox 1 is checked", checkbox1);
console.log("checkbox 2 is checked", checkbox2);
console.log("checkbox 3 is checked", checkbox3);If you run index.html, you should see this webpage:
Ok, let’s break this example down.
Only the first checkbox is checked. That is because, in the HTML, we have marked that checkbox with the checked attribute.
We use the document.querySelector to verify if the checkbox is checked.
The parameter we set in the querySelector method is what we will be targeting. In this example, I target the id of the HTML element by adding # before the id name.
We use the checked property to see if the checkbox is checked or not.
The output in the developer console in Chrome will look like this:
How to Check if All Checkboxes are Checked in JavaScript
What if you have several checkboxes and you want to verify if all of the checkboxes are checked?
We can use querySelectorAll to solve this problem:
Change your app.js file to look like this:
// app.js
let checkboxes = document.querySelectorAll('.checkbox');
console.log(checkboxes);If you noticed in our index.html, we had a class with the name of checkbox on each checkbox element.
If we target the checkbox classname with querySelectorAll we get this as an output:
As you can see, we get a list of all three checkbox elements.
We can get only the checked elements by doing a small change on the querySelectorAll method:
let checkedElements = document.querySelectorAll('.checkbox:checked');Alternative, you can query all checkboxes on a page by querying all inputs which are checked, like this:
let checkedElements = document.querySelectorAll('input:checked');Since we know we have three checkboxes on our page. We can find out if all the checkboxes are checked by comparing the length of the checked elements.
let checkedElements = document.querySelectorAll('.checkbox:checked');
let allIsChecked = checkedElements.length === 3;
console.log("allIsChecked", allIsChecked);This works, but I see a potential problem in the future.
If we add another checkbox in the HTML, without changing the JavaScript, we will break the code.
Hardcoding the value 3 which I did in the example above, is usually a bad practice.
We can solve this by changing our code a little bit:
let checkedElements = document.querySelectorAll('.checkbox:checked');
let allCheckboxes = document.querySelectorAll('.checkbox');
let allIsChecked = checkedElements.length === allCheckboxes.length;
console.log("allIsChecked", allIsChecked);So here, we query all checkboxes and all checked checkboxes. In this way, if we add another checkbox, the code will still work.
