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
Program to check/uncheck checkboxes using JavaScript
We will learn how to check or uncheck checkboxes in JavaScript in this article, and how we can use it to allow users to make multiple selections on web pages.
Checkboxes are one of the most used HTML elements in forms and user interfaces that allow users to pick multiple options. In JavaScript, we can dynamically check or uncheck checkboxes based on certain conditions or user interactions.
Let's look at some examples to understand the concept better:
Basic Check All/Uncheck All
In this example, we will:
Create 3 different checkboxes with "Check All" and "Uncheck All" buttons
Use
querySelectorAll()to select all checkboxes and iterate usingforEach()Set the
checkedproperty totrueorfalseto control checkbox state
<html>
<head>
<title>Program To check / uncheck Checkboxes Using JavaScript</title>
</head>
<body>
<h3>Program to check/uncheck checkboxes using JavaScript</h3>
<label>
<input type="checkbox" id="checkbox1"/>
Checkbox 1
</label>
<br/>
<label>
<input type="checkbox" id="checkbox2" />
Checkbox 2
</label>
<br/>
<label>
<input type="checkbox" id="checkbox3" />
Checkbox 3
</label>
<br/>
<button onclick="checkAll()">Check All</button>
<button onclick="uncheckAll()">Uncheck All</button>
<script>
function checkAll(){
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox) => {
checkbox.checked = true;
});
}
function uncheckAll(){
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox) => {
checkbox.checked = false;
});
}
</script>
</body>
</html>
Advanced Example with Visual Selection
This example adds visual feedback by highlighting selected items and allows checking/unchecking only highlighted checkboxes:
<html>
<head>
<title>Advanced Checkbox Control</title>
<style>
.selected {
background-color: yellow;
padding: 5px;
}
li {
margin: 10px 0;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Click items to highlight, then use buttons</h3>
<ul>
<li>
<label>
<input type="checkbox" id="option1" />
Option 1
</label>
</li>
<li>
<label>
<input type="checkbox" id="option2" />
Option 2
</label>
</li>
<li>
<label>
<input type="checkbox" id="option3" />
Option 3
</label>
</li>
</ul>
<button onclick="checkSelected()">Check Highlighted</button>
<button onclick="uncheckSelected()">Uncheck Highlighted</button>
<script>
const checkboxes = document.querySelectorAll("[type='checkbox']");
// Add click listeners to list items for highlighting
checkboxes.forEach((checkbox) => {
const listItem = checkbox.parentElement.parentElement;
listItem.addEventListener('click', (evt) => {
if (evt.target.type !== 'checkbox') {
listItem.classList.toggle('selected');
}
});
// Handle checkbox change
checkbox.addEventListener('change', (evt) => {
if (evt.target.checked) {
listItem.classList.add('selected');
} else {
listItem.classList.remove('selected');
}
});
});
function checkSelected() {
checkboxes.forEach((checkbox) => {
const listItem = checkbox.parentElement.parentElement;
if (listItem.classList.contains('selected')) {
checkbox.checked = true;
}
});
}
function uncheckSelected() {
checkboxes.forEach((checkbox) => {
const listItem = checkbox.parentElement.parentElement;
if (listItem.classList.contains('selected')) {
checkbox.checked = false;
}
});
}
</script>
</body>
</html>
Key Methods
| Method | Purpose | Usage |
|---|---|---|
querySelectorAll() |
Select all checkboxes | document.querySelectorAll('input[type="checkbox"]') |
forEach() |
Iterate over elements | checkboxes.forEach(checkbox => {...}) |
checked property |
Get/set checkbox state | checkbox.checked = true/false |
Common Use Cases
Select All/None: Bulk operations in data tables or forms
Conditional Logic: Enable/disable checkboxes based on other selections
Form Validation: Ensure required checkboxes are selected
User Preferences: Save and restore checkbox states
Conclusion
JavaScript provides simple methods to control checkbox states using the checked property and DOM selection methods. These techniques enable interactive forms and improved user experiences through bulk operations and conditional logic.
675 Views
