PHP SQL PROJECTS SOURCE CODE QUIZZES POST QUERY MORE

PHP

SQL

PROJECTS

SOURCE CODE

QUIZZES

POST QUERY

LOG IN

Why Log In?

Allow Only One Checkbox to be Checked using jQuery and JavaScript

Published Aug 27,2022 by Kailash Singh

0 Comment 1622 Views

In this tutorial, we are going to teach you, how to create 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.

1. 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>

2. 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" 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>