This example demonstrates how to select all the checkboxes using JQuery. It is one of the common requirement in many of the applications, when there is multiple checkboxes in a page, we have to keep an option for “select all” and when all the checkboxes got selected, by default “select all” check box also to be selected. Here I have written a simple example to demonstrate that.
[code lang=”xml”]
<!DOCTYPE html>
<html>
<head>
<title>How to Check All Check Boxes using JQuery</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
var chkId = ”;
$(‘.chkNumber:checked’).each(function () {
chkId += $(this).val() + ",";
});
chkId = chkId.slice(0, -1);
$(‘.chkSelectAll’).change(function () {
$(‘.chkNumber’).prop(‘checked’, this.checked);
});
$(‘.chkNumber’).change(function() { $(‘.chkSelectAll’).prop(‘checked’,$(‘.chkNumber:checked’).length == $(‘.chkNumber’).length);
});
});
</script>
</head>
<body>
<h2>Select All Check Boxes using JQuery</h2>
<table id="mytable">
<tr>
<td>
<input type="checkbox" class="chkSelectAll" />SelectAll
</td>
<td><input type="checkbox" class="chkNumber" value="1" />One</td>
<td><input type="checkbox" class="chkNumber" value="2" />Two</td>
<td><input type="checkbox" class="chkNumber" value="3" />Three</td>
<td><input type="checkbox" class="chkNumber" value="4" />Four</td>
<td><input type="checkbox" class="chkNumber" value="5" />Five<br /></td>
</tr>
</table>
</body>
</html>
[/code]
JQuery CheckBox Demo
Leave a Reply