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 we will give you information about How to select only one checkbox at a time in jquery example. Hear we will give you detail about How to select only one checkbox at a time in jquery exampleAnd how to use it also give you demo for it if it is necessary.

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.

See also Intro to Svelte.js Components

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 :

<html>
<head>
<title>how to select only one checkbox at a time in jquery</title>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<inputvalue="1"name="product"class="product-list"type="checkbox">Product 1  
<inputvalue="2"name="product"class="product-list"type="checkbox">Product 2  
<inputvalue="3"name="product"class="product-list"type="checkbox">Product 3  
<inputvalue="4"name="product"class="product-list"type="checkbox">Product 4  
<inputvalue="5"name="product"class="product-list"type="checkbox">Product 5  
<scripttype="text/javascript">
    $('.product-list').on('change', function() {
        $('.product-list').not(this).prop('checked', false);  
    });
</script>
</body>
</html>

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

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

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

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

Show Demo

Label :

HTML

jQuery

How To

JavaScript

Hope this code and post will helped you for implement How to select only one checkbox at a time in jquery example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

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

Label :

Leave a Comment Cancel Reply