html select only one checkbox in a group
$('input[type="checkbox"]').on('change', function() {
$(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});

<html><head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('input[type="checkbox"]').on('change', function() {
$(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});
});//]]>
</script>
</head>
<body>
<div>
<span>Group 1:</span>
<input class="group1" checked="" type="checkbox">
<input class="group1" type="checkbox">
<input class="group1" type="checkbox">
</div>
<div>
<span>Group 2:</span>
<input class="group2" type="checkbox">
<input class="group2" checked="" type="checkbox">
<input class="group2" type="checkbox">
</div>
<div>
<span>Group 3:</span>
<input class="group3" type="checkbox">
<input class="group3" type="checkbox">
<input class="group3" checked="" type="checkbox">
</div>
</body></html>

<html><head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
});//]]>
</script>
</head>
<body>
<span>Group 1:</span>
<input name="group1[]" type="checkbox">
<input name="group1[]" type="checkbox">
<input name="group1[]" type="checkbox">
<span>Group 2:</span>
<input name="group2[]" type="checkbox">
<input name="group2[]" type="checkbox">
<input name="group2[]" type="checkbox">
<span>Group 3:</span>
<input name="group3[]" type="checkbox">
<input name="group3[]" type="checkbox">
<input name="group3[]" type="checkbox">
</body></html>
$(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});
First method
<html><head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('input[type="checkbox"]').on('change', function() {
$(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});
});//]]>
</script>
</head>
<body>
<div>
<span>Group 1:</span>
<input class="group1" checked="" type="checkbox">
<input class="group1" type="checkbox">
<input class="group1" type="checkbox">
</div>
<div>
<span>Group 2:</span>
<input class="group2" type="checkbox">
<input class="group2" checked="" type="checkbox">
<input class="group2" type="checkbox">
</div>
<div>
<span>Group 3:</span>
<input class="group3" type="checkbox">
<input class="group3" type="checkbox">
<input class="group3" checked="" type="checkbox">
</div>
</body></html>
second method
<html><head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
});//]]>
</script>
</head>
<body>
<span>Group 1:</span>
<input name="group1[]" type="checkbox">
<input name="group1[]" type="checkbox">
<input name="group1[]" type="checkbox">
<span>Group 2:</span>
<input name="group2[]" type="checkbox">
<input name="group2[]" type="checkbox">
<input name="group2[]" type="checkbox">
<span>Group 3:</span>
<input name="group3[]" type="checkbox">
<input name="group3[]" type="checkbox">
<input name="group3[]" type="checkbox">
</body></html>
Comments
Post a Comment