Menu Close

How to select only one checkbox from multiple checkboxes at a time by using jQuery?

Codeamend

Let’s see how to select only one checkbox from multiple checkboxes at a time by using jQuery. Follow the below script, as you want to select one checkbox from the group of checkboxes by using two ways of jquery functions.

Using on change function

<html>
<head>
    <title>Only one selected checkbox at a time</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
    <p>Click the checkbox</p>
    <input value="1" name="option1" class="option" type="checkbox">Option 1  
    <input value="2" name="option2" class="option" type="checkbox">Option 2  
    <input value="3" name="option3" class="option" type="checkbox">Option 3  
  
  <script>
    $('.option').on('change', function() {
        $('.option').not(this).prop('checked', false);  
    });
  </script>

</body>
</html> 

Using on click function

<html>
<head>
    <title>Only one selected checkbox at a time</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
    <p>Click the checkbox</p>
    <input value="1" name="option1" class="option" type="checkbox">Option 1  
    <input value="2" name="option2" class="option" type="checkbox">Option 2  
    <input value="3" name="option3" class="option" type="checkbox">Option 3  
  
 
  <script>
    $('.option').click(function() {
        $(this).siblings('input:checkbox').prop('checked', false);
    });
  </script>
</body>
</html> 
Posted in HTML, jQuery

You can also read...