HTML checkboxes are commonly used to enable users to select multiple items from a list, while radio buttons are used for exclusive single selections.
However, there are instances where a checkbox is preferred over a radio button, even when only one option should be selected.
In this tutorial, I show how you can allow only one checkbox selection using jQuery and JavaScript.
Table of Content
- Enabling Single Checkbox Selection with jQuery
- Enabling Single Checkbox Selection with JavaScript
- Conclusion
1. Enabling Single Checkbox Selection with jQuery
In this section, we will focus on using jQuery to enable the selection of only one checkbox at a time among a group of checkboxes.
HTML Structure
Create multiple checkboxes and assign the class "checkoption" to each of them. The class "checkoption" will help us target these checkboxes efficiently with our jQuery code.
jQuery Code
- Define click event for elements with the class
"checkoption". - Inside the function, use
$('.checkoption').not(this)to exclude the clicked checkbox from the selection, and then set theprop('checked', false)to uncheck all other checkboxes in the group. This ensures that only one checkbox can be checked at any given time, allowing for a smooth and intuitive single selection experience.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Allow Only One Checkbox to be Checked using jQuery and JavaScript</title>
</head>
<body>
<input type="checkbox" class="checkoption" value="1" > Option1 <br>
<input type="checkbox" class="checkoption" value="2" > Option2 <br>
<input type="checkbox" class="checkoption" value="3" > Option3 <br>
<input type="checkbox" class="checkoption" value="4" > Option4 <br>
<input type="checkbox" class="checkoption" value="5" > Option5 <br>
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.checkoption').click(function() {
$('.checkoption').not(this).prop('checked', false);
});
});
</script>
</body>
</html>
2. Enabling Single Checkbox Selection with JavaScript
In this section, we will achieve the same single checkbox selection using JavaScript. This approach can be useful if you prefer to avoid using external libraries like jQuery or if you want to have more control over your code.
HTML Structure
Create multiple checkboxes and assign the class "checkoption" to each checkbox element. Additionally, attach an onclick event to each checkbox, calling the function checkedOnClick(this) whenever a checkbox is clicked.
JavaScript
- Create
checkedOnClick()function. This function takes the clicked checkbox as an argument (el). Inside the function, we first select all checkboxes with the class"checkoption"and store them in thecheckboxesListvariable. - Next, use a loop to iterate through the
checkboxesList, setting thecheckedattribute of each checkbox tofalse, effectively unchecking all checkboxes in the group. - Finally, set the
checkedattribute of the clicked checkbox (el) totrue, ensuring that only the clicked checkbox remains checked.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Allow Only One Checkbox to be Checked using jQuery and JavaScript</title>
</head>
<body>
<input type="checkbox" class="checkoption" value="1" onclick="checkedOnClick(this);"> Option1 <br>
<input type="checkbox" class="checkoption" value="2" onclick="checkedOnClick(this);"> Option2 <br>
<input type="checkbox" class="checkoption" value="3" onclick="checkedOnClick(this);"> Option3 <br>
<input type="checkbox" class="checkoption" value="4" onclick="checkedOnClick(this);"> Option4 <br>
<input type="checkbox" class="checkoption" value="5" onclick="checkedOnClick(this);"> Option5 <br>
<!-- Script -->
<script type="text/javascript">
function checkedOnClick(el){
// Select all checkboxes by class
var checkboxesList = document.getElementsByClassName("checkoption");
for (var i = 0; i < checkboxesList.length; i++) {
checkboxesList.item(i).checked = false; // Uncheck all checkboxes
}
el.checked = true; // Checked clicked checkbox
}
</script>
</body>
</html>
3. Conclusion
We learned how to enable single checkbox selection using both jQuery and JavaScript. Whether you choose jQuery’s simplicity or JavaScript’s lightweight approach, you can improve user experience and facilitate exclusive choices on your web page.
If you found this tutorial helpful then don't forget to share.