Select/Deselect Multiple Checkboxes using jQuery

by Sasikumar 2014-03-17 17:27:56

To select/deselect multiple checkboxes using jquery :
<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>

Note : Here we operate with reference to the name of the input, in case if your in need to operate based on class, add "classname" to all check box and in javascript code change "input[name='menu']" to ".classname"
Output :
Screenshot.png
1668
like
0
dislike
0
mail
flag

You must LOGIN to add comments