Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check whether a checkbox is checked in JavaScript?
In this tutorial, we will learn to check whether a checkbox is checked in JavaScript. The checkbox is an input type in HTML that works as a selection box. Unlike radio buttons which allow users to select only one value from a group, checkboxes allow users to select multiple values.
HTML can add checkboxes to webpages, but JavaScript is needed to add behavior based on whether checkboxes are checked or not. We'll learn to check both single and multiple checkboxes.
Check if a Single Checkbox is Selected
To check if a checkbox is selected, we access the checkbox element using its ID and use the .checked property, which returns true or false.
Syntax
let checkbox = document.getElementById("checkbox_id");
let isChecked = checkbox.checked; // returns Boolean value
Example
In this example, we create a checkbox with an event listener. When the user changes the checkbox value, we check if it's selected and display appropriate text.
<html>
<head>
<title>Check whether the Checkbox is checked or not</title>
</head>
<body>
<h2>Check whether the Checkbox is checked or not using <i>.checked attribute</i></h2>
<h4>Check the below checkbox to see the text div</h4>
<input type="checkbox" id="checkbox">
<div id="text"></div>
<script>
let checkbox = document.getElementById("checkbox");
let text = document.getElementById("text");
checkbox.addEventListener("change", () => {
if (checkbox.checked) {
text.innerHTML = "Checkbox is checked.";
} else {
text.innerHTML = "";
}
});
</script>
</body>
</html>
When you check the checkbox, it displays "Checkbox is checked." When unchecked, the message disappears.
Check if Multiple Checkboxes Are Selected
For multiple checkboxes, we often need to verify that all are selected before enabling certain functionality, like an "Accept" button for terms and conditions.
Syntax
Step 1: Access all checkboxes and the button
let checkboxes = document.getElementsByName("checkbox");
let button = document.getElementById("btn");
Step 2: Add event listeners to all checkboxes
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("change", () => {
// Check all checkboxes logic
});
}
Step 3: Check if all checkboxes are selected
button.disabled = false;
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked == false) {
button.disabled = true;
break;
}
}
Example
This example creates three checkboxes that must all be checked to enable a submit button.
<html>
<head>
<title>Multiple Checkbox Check</title>
</head>
<body>
<h2>Check whether all Checkboxes are selected</h2>
<h4>Check all checkboxes below to enable the submit button</h4>
<label><input type="checkbox" name="checkbox"> Term 1</label><br>
<label><input type="checkbox" name="checkbox"> Term 2</label><br>
<label><input type="checkbox" name="checkbox"> Term 3</label><br><br>
<button id="btn" disabled>Submit</button>
<script>
let checkboxes = document.getElementsByName("checkbox");
let button = document.getElementById("btn");
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("change", () => {
button.disabled = false;
// Check if all checkboxes are selected
for (let j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked == false) {
button.disabled = true;
break;
}
}
});
}
</script>
</body>
</html>
The submit button remains disabled until all three checkboxes are checked. Unchecking any checkbox disables the button again.
Alternative Methods
| Method | Use Case | Advantage |
|---|---|---|
element.checked |
Single checkbox | Simple and direct |
querySelectorAll() |
Multiple checkboxes | More flexible selection |
every() method |
All checkboxes validation | Cleaner code with arrays |
Conclusion
Use the .checked property to determine checkbox status. For multiple checkboxes, iterate through all elements and validate their states. This approach enables dynamic user interfaces that respond to checkbox selections.
54K+ Views
