Categories
Multiple Selection by checkbox with JQuery
<p>HTML Code:</p>
<pre>
<form id="form1" action="example_page.php" method="POST" name="form1"> <div class="form-group">
<input id="selectall" type="checkbox" /> <span style="float: right;">Selected Items:</span>
<input class="case" name="case[]" type="checkbox" value="1" />
<input class="case" name="case[]" type="checkbox" value="2" /> <input class="case" name="case[]" type="checkbox" value="3" />
</div>
</form>
</pre>
<p> </p>
<p>JQuery Script:</p>
<pre>
$(document).on('click', '#selectall,.case', function() {
// add multiple select deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked); var checkLength = $(".case:checked").length; $('.countSelect').text(checkLength);
});
var checkLength = $(".case:checked").length; $('.countSelect').text(checkLength);
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){ var checkLength = $(".case:checked").length; $('.countSelect').text(checkLength);
if($(".case").length === $(".case:checked").length) { $("#selectall").attr("checked", "checked");
} else { $("#selectall").removeAttr("checked"); }
}); });
// End Select All and individual select Enjoy!!!
</pre>
Copy Link to Share:
More articles you may like
