How to select only one checkbox at a time in jquery example

How to select only one checkbox at a time in jquery example

In this post, i will tell you how to select only one checkbox from multiple checkboxes at a time by using jQuery by two ways.

This script is usefull when you need users to be able to select only one checkboxes in pages same as radio button i mean if you have group of checkboxes and you want to force user to select only one checkbox at a time then you can use this script.

I know in many cases radio buttons are "ideal" but in some cases you will need this script to check only one checkboxes from group of checkboxes.

See the example below :

  1. <html>
  2. <head>
  3. <title>how to select only one checkbox at a time in jquery</title>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  5. </head>
  6. <body>
  7. <input value="1" name="product" class="product-list" type="checkbox">Product 1
  8. <input value="2" name="product" class="product-list" type="checkbox">Product 2
  9. <input value="3" name="product" class="product-list" type="checkbox">Product 3
  10. <input value="4" name="product" class="product-list" type="checkbox">Product 4
  11. <input value="5" name="product" class="product-list" type="checkbox">Product 5
  12. <script type="text/javascript">
  13. $('.product-list').on('change', function() {
  14. $('.product-list').not(this).prop('checked', false);
  15. });
  16. </script>
  17. </body>
  18. </html>

You can also go with following script to force user to select only checkbox at a time :

  1. <script type="text/javascript">
  2. //Near checkboxes
  3. $('.product-list').click(function() {
  4. $(this).siblings('input:checkbox').prop('checked', false);
  5. });
  6. </script>

Phone: (+91) 8800417876
Noida, 201301
Betwinner
pendik escort
kartal escort