Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to toggle between one checkbox and a whole group of checkboxes in HTML?
The toggling means that whenever a user checks a single checkbox, all checkboxes of the group should be unchecked, and when a user checks any checkbox from the group, a single checkbox should be unchecked. We can achieve this functionality with JavaScript. In this tutorial, we will learn to toggle between one checkbox and a whole group of checkboxes in HTML.
Syntax
Users can follow the syntax below to toggle between one checkbox and a whole group of checkboxes in HTML.
checkboxes.forEach((checkbox) => {
checkbox.checked = false;
})
In the above syntax, checkboxes is an all checkboxes in the group. To uncheck the checkbox, we can set false as a value of the checkbox's checked property.
Example 1
In the example below, we have created a group of checkboxes called table_size. Also, we have created single checkboxes.
On every checkbox of the group, we have added an onclick event, which invokes the clearSingle() function. In the clearSingle() function, we access the single checkbox and uncheck it using JavaScript.
Also, on the single checkbox, we have added the onclick event, which invokes the clearGroup() function. In the clearGroup() function, we access all checkboxes of the group, and uncheck them.
<html>
<body>
<h2> Using the <i> JavaScript </i> to toggle between one checkbox and group of checkboxes. </h2>
<label for = "table1"> 4 Feet </label>
<input type = "checkbox" name = "table_size" id = "table1" value = "4Feet" onclick = "clearSingle()">
<label for = "table2"> 5 Feet </label>
<input type = "checkbox" name = "table_size" id = "table2" value = "5Feet" onclick = "clearSingle()">
<label for = "table3"> 6 Feet </label>
<input type = "checkbox" name = "table_size" id = "table3" value = "6Feet" onclick = "clearSingle()">
<label for = "table4"> 8 Feet </label>
<input type = "checkbox" name = "table_size" id = "table4" value = "8Feet" onclick = "clearSingle()"> <br> <br>
<label for = "clear"> Clear </label>
<input type = "checkbox" name = "clear" id = "clear" value = "clear" onclick = "clearGroup()">
</body>
<script>
function clearGroup() {
let checkboxes = document.getElementsByName('table_size');
checkboxes.forEach((checkbox) => {
checkbox.checked = false;
})
}
function clearSingle() {
let singleCheckBox = document.getElementById('clear');
singleCheckBox.checked = false;
}
</script>
</html>
In the above example, we have added an onclick event to every checkbox, which can make code more complex and unreadable. So, in example 2, we will add an onchange event on every checkbox using JavaScript.
Example 2
In the example below, we created a group of checkboxes and one separate checkbox. We have added an onchange event on every checkbox of the group. So, whenever a change occurs in any checkbox of the group, it will clear the single checkbox.
Also, we added the onchange event on the single checkbox. Whenever any changes occur in the single checkbox, it clears all checkboxes of the group.
<html>
<body>
<h2> Using the <i> JavaScript </i> to toggle between one checkbox and group of checkboxes </h2>
<label for = "USD"> 20 USD </label>
<input type = "checkbox" name = "Currency" id = "USD" value = "20">
<label for = "INR"> 1500 INR </label>
<input type = "checkbox" name = "Currency" id = "INR" value = "1500">
<label for = "Euro"> 20 Euro </label>
<input type = "checkbox" name = "Currency" id = "Euro" value = "20">
<label for = "GBP"> 18 GBP </label>
<input type = "checkbox" name = "Currency" id = "GBP" value = "18">
<br> <br>
<label for = "clear"> clear </label>
<input type = "checkbox" name = "clear" id = "clear" value = "clear">
</body>
<script>
let currencyCheckBoxes = document.getElementsByName('Currency');
let singleCheckBox = document.getElementById('clear');
currencyCheckBoxes.forEach((checkbox) => {
checkbox.onchange = function () {
singleCheckBox.checked = false;
}
})
singleCheckBox.onchange = () => {
currencyCheckBoxes.forEach((checkbox) => {
checkbox.checked = false;
})
}
</script>
</html>
We learned two different examples to toggle between single and group checkboxes using JavaScript. In the first example, we used the click event, and in the second, we used the change event.
2K+ Views
To Continue Learning Please Login