HTML checkboxes are used for picking multiple items from the list and for allowing a single selection HTML radio button to be used.
Sometimes it is required to use a checkbox instead of a radio for a single selection.
In this tutorial, I show how you can allow only one checkbox selection using jQuery and JavaScript.
Contents
1. Using jQuery
HTML
Create multiple checkboxes and add class="checkoption"
to all checkboxes.
jQuery
- Define
click
event oncheckoption
class. - Set all checkboxes
checked
attribute tofalse
except the clicked checkbox.
Completed Code
<!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. Using JavaScript
HTML
Create multiple checkboxes and add class="checkoption"
to all checkboxes. Define onclick
event on the checkboxes that calls checkedOnClick(this);
.
JavaScript
- Create
checkedOnClick()
function. - Select all checkboxes where
class="checkoption"
and assign tocheckboxesList
variable. - Loop on
checkboxesList
and setchecked
attribute tofalse
. - Set clicked checkbox
checked
attribute totrue
.
Completed Code
<!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
You can use any of the above methods to allow only one checkbox selection from the group of checkboxes.
If you found this tutorial helpful then don't forget to share.