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.

In this tutorial, I show how you can allow only one checkbox selection using jQuery and JavaScript.

jQuery
JavaScript
Conclusion

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.

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>

View Demo

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.

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>

View Demo

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.

Allow Only One Checkbox to be Checked using jQuery and JavaScript

Contents

1. Using jQuery

2. Using JavaScript

3. Conclusion

Leave a Comment Cancel reply