Here i am sharing a small jQuery function that toggles multiple select boxes. In our Applications/projects we will have list with a checkbox, to do action like Edit,delete. When user need to select all the list we have to provide a multiple check-boxes selection option, here is the simple code which will helps you in many projects.
Here is the example of multiple select box toggle with jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Select All checkboxes using jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".check-all").change(function(){
if(this.checked){
$(".check-box").each(function(){
this.checked=true;
})
}else{
$(".check-box").each(function(){
this.checked=false;
})
}
});
$(".check-box").click(function (){
if ($(this).is(":checked")){
var isAllChecked = 0;
$(".check-box").each(function(){
if(!this.checked)
isAllChecked = 1;
})
if(isAllChecked == 0){ $(".check-all").prop("checked", true); }
}else {
$(".check-all").prop("checked", false);
}
});
});
</script>
</head>
<body>
<table style="width:100%">
<tr>
<th><input type="checkbox" name="checkedAll" class="check-all" />Check all</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td><input type="checkbox" name="checkAll" class="check-box" /></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td><input type="checkbox" name="checkAll" class="check-box" /></td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td><input type="checkbox" name="checkAll" class="check-box" /></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
