jQuery Select All Checkboxes

A quick little jQuery source code in order to select all checkboxes in a list of checkboxes. deselect “checked all”, if one of the listed checkbox product is unchecked amd select “checked all” if all of the listed checkbox product is checked.

Example 1: index.html

<html lang="en">
<head>
<title>Select and deselect all checkboxes using jquery - www.pakainfo.com</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<ul>
<li><input name="product_all" class="all_products" type="checkbox">Select All</li>
<li><input value="1" name="product" class="checkbox" type="checkbox">Laptop 1 </li>
<li> <input value="2" name="product" class="checkbox" type="checkbox">Mobile 2 </li>
<li><input value="3" name="product" class="checkbox" type="checkbox">Computer 3 </li>
<li><input value="4" name="product" class="checkbox" type="checkbox">Iphone 4 </li>
<li><input value="5" name="product" class="checkbox" type="checkbox">Pendrive 5 </li>
</ul>
<script type="text/javascript">
$('.all_products').on('change', function() {
$('.checkbox').prop('checked', $(this).prop("checked"));
});

$('.checkbox').change(function(){ //".checkbox" change
if($('.checkbox:checked').length == $('.checkbox').length){
$('.all_products').prop('checked',true);
}else{
$('.all_products').prop('checked',false);
}
});
</script>
</body>
</html>

Example 2:
The HTML code is given below

<div class="row">
<div class="col-md-3 ">
Select All : <input id="checkall" class='' type="checkbox" >
</div>

<div class="col-md-3" >
Checkbox 1 :<input value="1" class='checkboxes' type="checkbox" name="checkboxes[]">
</div>
<div class="col-md-3" >
Checkbox 2 :<input value="2" class='checkboxes' type="checkbox" name="checkboxes[]">
</div>
<div class="col-md-3" >
Checkbox 3 :<input value="3" class='checkboxes' type="checkbox" name="checkboxes[]">
</div>

</div>

The Jquery Code is given below.

$("#checkall").click(function (){
if ($("#checkall").is(':checked')){
$(".checkboxes").each(function (){
$(this).prop("checked", true);
});
}else{
$(".checkboxes").each(function (){
$(this).prop("checked", false);
});
}
});

I hope you get an idea about jquery select all checkboxes in table.

This blog post was originally published at: https://www.pakainfo.com

#jquery