Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 the web page
Checboxes are one of the most used HTML elements in forms and user interfaces that allow users to pick numerous options. In JavaScript, we can dynamically check or uncheck checkboxes based on certain conditions or user interactions.
Let's look at some of the examples to understand the concept better ?
Example 1
In this example, we will ?
We will create 3 different checkboxes, a checkAll() and an uncheckAll() function.
In the checkAll() function, we will select all checkboxes and iterate over the selected checkboxes using the forEach() method and set the checked property to true, which checks all the checkboxes.
Similarly, in the uncheckAll() function, we will follow the same steps, but this time we will set the checked property to false, which unchecks all the checkboxes.
Filename - index.html
<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="first ch"/>
Checkbox 1
</label>
<br/>
<label>
<input type="checkbox" id="second ch" />
Checkbox 2
</label>
<br/>
<label>
<input type="checkbox" id="third ch" />
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>
Output
The result will like the image below.
Example 2 - Using the Ternary Operator
In this example, let's make following changes ?
Change event listeners to detect changes in their state, along with two buttons labeled "Check Selected" and "Uncheck Selected".
When clicked, these buttons will iterate over the checkboxes and check/uncheck the ones that have the selected class.
Filename - index.html
<html>
<head>
<title>Program To check / uncheck checkboxes using Javascript</title>
<script src="script.js"></script>
<style>
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<h3>Check/Uncheck Checkboxes</h3>
<ul>
<li>
<label>
<input type="checkbox" id="first ch" />
Checkbox 1
</label>
</li>
<li>
<label>
<input type="checkbox" id="second ch" />
Checkbox 2
</label>
</li>
<li>
<label>
<input type="checkbox" id="third ch" />
Checkbox 3
</label>
</li>
</ul>
<button onclick="checkSelected()">Check Selected</button>
<button onclick="uncheckSelected()">Uncheck Selected</button>
<script>
let checkboxes = document.querySelectorAll("[type='checkbox']");
for (let i = 0; i < checkboxes.length; i++) {
const ch = checkboxes[i];
ch.addEventListener('change', (evt) => {
if (evt?.target?.checked) {
evt.target.parentElement.parentElement.classList.add('selected');
} else {
evt.target.parentElement.parentElement.classList.remove('selected');
}
});
}
function checkSelected() {
for (let i = 0; i < checkboxes.length; i++) {
const ch = checkboxes[i];
if (ch.parentElement.parentElement.classList.contains('selected')) {
ch.checked = true;
}
}
}
function uncheckSelected() {
for (let i = 0; i < checkboxes.length; i++) {
const ch = checkboxes[i];
if (ch.parentElement.parentElement.classList.contains('selected')) {
ch.checked = false;
}
}
}
</script>
</body>
</html>
Output
The result will like the image below.
Conclusion
In this article, we learned how to create a program to check or uncheck checkboxes using JavaScript. We used the checked property of the checkboxes to toggle their state. We learned how to program a check or uncheck checkboxes code in javascript and saw some examples explaining the same.
458 Views
