JS
Allow Only One Checkbox To Be Checked Using Jquery And Javascript
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.
- TAGS
- Javascript
- jQuery
- 4.5/5.0
- Last updated 10 September, 2022
- By Admin
1. Using jQuery
HTML
Create multiple checkboxes and add class="checkoption" to all checkboxes
jQuery
Define click event on checkoption class
Set all checkboxes checked attribute to false except the clicked checkbox.
<!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 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 to checkboxesList variable.
Loop on checkboxesList and set checked attribute to false.
Set clicked checkbox checked attribute to true.
<!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>
I hope it can help you...