<html>
<head>
<title>Select/Deselect Multiple Checkboxes</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#selectallmenu").click(function () {
$('input[name='menu']').attr('checked', this.checked);
});
$("input[name='menu']").click(function(){
if($("input[name='menu']").length == $("input[name='menu']:checked").length) { $("#selectallmenu").attr("checked", "checked");}
else { $("#selectallmenu").removeAttr("checked"); }
});
});
</script>
</head>
<body>
<h1>Select/Deselect Multiple Checkboxes</h1>
<table border="1">
<tr>
<th><input type="checkbox" id="selectallmenu"/></th>
<th>Menu</th>
</tr>
<tr>
<td><input type="checkbox" name="menu" value="1"/></td>
<td>Home</td>
</tr>
<tr>
<td><input type="checkbox" name="menu" value="2"/></td>
<td>Contact Us</td>
</tr>
<tr>
<td><input type="checkbox" name="menu" value="3"/></td>
<td>About Us</td>
</tr>
<tr>
<td><input type="checkbox" name="menu" value="4"/></td>
<td>Careers</td>
</tr>
<tr>
<td><input type="checkbox" name="menu" value="5"/></td>
<td>Help</td>
</tr>
</table>
</body>
</html>
Here we operate with reference to the name of the input, in case if your in need to operate based on class, add "
