Sometimes, we want to select only one checkbox in a group with HTML and JavaScript.
In this article, we’ll look at how to select only one checkbox in a group with HTML and JavaScript.
How to select only one checkbox in a group with HTML and JavaScript?
To select only one checkbox in a group with HTML and JavaScript, we uncheck the checkboxes other than the checked ones.
For instance, we write
<div class="test-checkbox">
Group One:
<label>
<input
type="checkbox"
data-limit="only-one-in-a-group"
name="groupOne"
value="Eat"
/>Eat
</label>
<label>
<input
type="checkbox"
data-limit="only-one-in-a-group"
name="groupOne"
value="Sleep"
/>Sleep
</label>
<label>
<input
type="checkbox"
data-limit="only-one-in-a-group"
name="groupOne"
value="Play"
/>Play
</label>
<br />
Group Two:
<label>
<input
type="checkbox"
data-limit="only-one-in-a-group"
name="groupTwo"
value="Fat"
/>Fat
</label>
<label>
<input
type="checkbox"
data-limit="only-one-in-a-group"
name="groupTwo"
value="Comfort"
/>Comfort
</label>
<label>
<input
type="checkbox"
data-limit="only-one-in-a-group"
name="groupTwo"
value="Happy"
/>Happy
</label>
</div>
to add the checkboxes.
Then we write
const uncheckOthers = (clicked) => {
const name = clicked.getAttribute("name");
[...cbxes].forEach((other) => {
if (other !== clicked && other.getAttribute("name") === name) {
other.checked = false;
}
});
};
const cbxes = document.querySelectorAll(
'input[type="checkbox"][data-limit="only-one-in-a-group"]'
);
[...cbxes].forEach((cbx) => {
cbx.addEventListener("change", (e) => {
if (e.target.checked) {
uncheckOthers(e.target);
}
});
});
to define the uncheckOthers function to uncheck all the checkboxes that aren’t checked.
We check if the checkbox should be unchecked with
other !== clicked && other.getAttribute("name") === name
Then we select all checkboxes with querySelectorAll.
We call forEach with a callback that adds a change listener to each checkbox with addEventListener.
If the element is checked according to e.target.checked, then we call uncheckOthers to uncheck the checkboxes other than the e.target checkbox.
e.target is the checkbox that triggered then change event.
Conclusion
To select only one checkbox in a group with HTML and JavaScript, we uncheck the checkboxes other than the checked ones.
