Today, We want to share with you only one checkbox selected at a time in javascript.In this post we will show you only single checkbox selected at a time in html, hear for Select only single checkbox at a time html we will give you demo and example for implement.In this post, we will learn about jQuery Check Uncheck All Checkbox Examples with an example.
Select one (single) CheckBox from multiple CheckBoxes in JavaScript
select only single checkbox at a time
<html>
<head>
<title>how to select only single checkbox at a time in jquery - www.pakainfo.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<input value="1" name="product" class="product-list" type="checkbox">Product 1
<input value="2" name="product" class="product-list" type="checkbox">Product 2
<input value="3" name="product" class="product-list" type="checkbox">Product 3
<input value="4" name="product" class="product-list" type="checkbox">Product 4
<input value="5" name="product" class="product-list" type="checkbox">Product 5
<script type="text/javascript">
$('.product-list').on('change', function() {
$('.product-list').not(this).prop('checked', false);
});
</script>
</body>
</html>
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>
Select only single checkbox at a time using Jquery
Example 1:
<html>
<head>
<title>Select only single checkboxs at time - www.pakainfo.com</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input value="1" name="product" class="product-list" type="checkbox">Product 1
<input value="2" name="product" class="product-list" type="checkbox">Product 2
<input value="3" name="product" class="product-list" type="checkbox">Product 3
<input value="4" name="product" class="product-list" type="checkbox">Product 4
<input value="5" name="product" class="product-list" type="checkbox">Product 5
<script type="text/javascript">
$('.product-list').on('change', function() {
$('.product-list').not(this).prop('checked', false);
});
</script>
</body>
</html>
I hope you get an idea about JavaScript function to select single CheckBox from multiple CheckBoxes.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโt forget to share.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.