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 toggle between one checkbox and a whole group of checkboxes in HTML?
The toggling between a single checkbox and a group of checkboxes means that when a user checks one checkbox from a group, all other checkboxes in the group become unchecked, and when the user checks a special "clear" checkbox, all checkboxes in the group get unchecked. This functionality is useful for creating mutually exclusive selections or providing a convenient way to clear multiple checkboxes at once.
Syntax
Following is the syntax to uncheck all checkboxes in a group using JavaScript
checkboxes.forEach((checkbox) => {
checkbox.checked = false;
});
Here, checkboxes refers to all checkboxes in the group. To uncheck a checkbox, we set the checked property to false.
Following is the syntax to access checkboxes by their name attribute
document.getElementsByName('groupName');
Using Click Events for Toggle Functionality
In this approach, we attach onclick events directly to each checkbox in the HTML. When any checkbox from the group is clicked, it clears the single checkbox. When the single checkbox is clicked, it clears all checkboxes in the group.
Example
Following example demonstrates toggling between one checkbox and a group using click events
<!DOCTYPE html>
<html>
<head>
<title>Toggle Checkboxes - Click Events</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Using <i>JavaScript</i> to toggle between one checkbox and group of checkboxes</h2>
<h3>Select Table Size:</h3>
<label for="table1">4 Feet</label>
<input type="checkbox" name="table_size" id="table1" value="4Feet" onclick="clearSingle()"><br>
<label for="table2">5 Feet</label>
<input type="checkbox" name="table_size" id="table2" value="5Feet" onclick="clearSingle()"><br>
<label for="table3">6 Feet</label>
<input type="checkbox" name="table_size" id="table3" value="6Feet" onclick="clearSingle()"><br>
<label for="table4">8 Feet</label>
<input type="checkbox" name="table_size" id="table4" value="8Feet" onclick="clearSingle()"><br><br>
<label for="clear">Clear All</label>
<input type="checkbox" name="clear" id="clear" value="clear" onclick="clearGroup()">
<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>
</body>
</html>
The output displays table size options and a clear checkbox. Selecting any table size unchecks the "Clear All" checkbox, while checking "Clear All" unchecks all table size options
Select Table Size: ? 4 Feet ? 5 Feet ? 6 Feet ? 8 Feet ? Clear All
The click event approach works well but requires adding onclick attributes to each checkbox in the HTML, which can make the code less maintainable.
Using Change Events for Better Code Organization
A better approach is to use JavaScript's onchange event and attach it programmatically. This keeps the HTML cleaner and makes the code more maintainable.
Example
Following example demonstrates the same functionality using change events added through JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Toggle Checkboxes - Change Events</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Using <i>JavaScript</i> to toggle between one checkbox and group of checkboxes</h2>
<h3>Select Currency:</h3>
<label for="USD">20 USD</label>
<input type="checkbox" name="Currency" id="USD" value="20"><br>
<label for="INR">1500 INR</label>
<input type="checkbox" name="Currency" id="INR" value="1500"><br>
<label for="Euro">20 Euro</label>
<input type="checkbox" name="Currency" id="Euro" value="20"><br>
<label for="GBP">18 GBP</label>
<input type="checkbox" name="Currency" id="GBP" value="18"><br><br>
<label for="clear">Clear All</label>
<input type="checkbox" name="clear" id="clear" value="clear">
<script>
let currencyCheckBoxes = document.getElementsByName('Currency');
let singleCheckBox = document.getElementById('clear');
// Add change event to each currency checkbox
currencyCheckBoxes.forEach((checkbox) => {
checkbox.onchange = function() {
if (this.checked) {
singleCheckBox.checked = false;
}
}
});
// Add change event to the clear checkbox
singleCheckBox.onchange = () => {
if (singleCheckBox.checked) {
currencyCheckBoxes.forEach((checkbox) => {
checkbox.checked = false;
});
}
}
</script>
</body>
</html>
The output shows currency options and a clear checkbox. Selecting any currency unchecks "Clear All", while checking "Clear All" unchecks all currency options
Select Currency: ? 20 USD ? 1500 INR ? 20 Euro ? 18 GBP ? Clear All
Advanced Implementation with Event Delegation
For larger forms with many checkboxes, event delegation provides a more efficient approach by using a single event listener on a parent container.
Example
<!DOCTYPE html>
<html>
<head>
<title>Toggle Checkboxes - Event Delegation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Advanced Toggle Implementation</h2>
<div id="checkbox-container">
<h3>Select Programming Language:</h3>
<label><input type="checkbox" name="language" value="JavaScript"> JavaScript</label><br>
<label><input type="checkbox" name="language" value="Python"> Python</label><br>
<label><input type="checkbox" name="language" value="Java"> Java</label><br>
<label><input type="checkbox" name="language" value="C++"> C++</label><br><br>
<label><input type="checkbox" id="clear-all" value="clear"> Clear All Languages</label>
</div>
<script>
const container = document.getElementById('checkbox-container');
const clearCheckbox = document.getElementById('clear-all');
container.addEventListener('change', function(event) {
const target = event.target;
if (target.type === 'checkbox') {
if (target.name === 'language' && target.checked) {
// Language checkbox was checked, uncheck clear-all
clearCheckbox.checked = false;
} else if (target.id === 'clear-all' && target.checked) {
// Clear-all checkbox was checked, uncheck all language checkboxes
const languageCheckboxes = container.querySelectorAll('input[name="language"]');
languageCheckboxes.forEach(cb => cb.checked = false);
}
}
});
</script>
</body>
</html>
This approach uses a single event listener on the container element, making it more efficient for forms with many checkboxes.
Comparison of Implementation Methods
| Method | Advantages | Disadvantages |
|---|---|---|
| Click Events (onclick) | Simple to understand, direct HTML approach | Requires inline event handlers, harder to maintain |
| Change Events (onchange) | Cleaner HTML, better code organization | Requires more JavaScript setup code |
| Event Delegation | Most efficient for large forms, single event listener | More complex logic, requires container element |
Key Points
-
Mutual exclusivity The toggle functionality ensures that only checkboxes from one group OR the clear checkbox can be checked at any time.
-
Event handling Both
onclickandonchangeevents work, butonchangeis generally preferred
2K+ Views
