<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<title>-all checkbox select demo-</title>
</head>
<body>
<table>
<tr>
<th><input id="selectall" type="checkbox" /></th>
<th>car</th>
<th>Price</th>
</tr>
<tr>
<td><input class="child_checkbox" name="child_checkbox" type="checkbox" value="1" /></td>
<td>mercidiz</td>
<td>10000000</td>
</tr>
<tr>
<td><input class="child_checkbox" name="child_checkbox" type="checkbox" value="2" /></td>
<td>swift</td>
<td>700000</td>
</tr>
<tr>
<td><input class="child_checkbox" name="child_checkbox" type="checkbox" value="3" /></td>
<td>BMW</td>
<td>2000000</td>
</tr>
<tr>
<td><input class="child_checkbox" name="child_checkbox" type="checkbox" value="4" /></td>
<td>ferrari</td>
<td>5000000</td>
</tr>
</table>
</body>
</html>
//Jquery Code
<script language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.child_checkbox').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".child_checkbox").click(function(){
if($(".child_checkbox").length == $(".child_checkbox:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</script>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<title>-all checkbox select demo-</title>
</head>
<body>
<table>
<tr>
<th><input id="selectall" type="checkbox" /></th>
<th>car</th>
<th>Price</th>
</tr>
<tr>
<td><input class="child_checkbox" name="child_checkbox" type="checkbox" value="1" /></td>
<td>mercidiz</td>
<td>10000000</td>
</tr>
<tr>
<td><input class="child_checkbox" name="child_checkbox" type="checkbox" value="2" /></td>
<td>swift</td>
<td>700000</td>
</tr>
<tr>
<td><input class="child_checkbox" name="child_checkbox" type="checkbox" value="3" /></td>
<td>BMW</td>
<td>2000000</td>
</tr>
<tr>
<td><input class="child_checkbox" name="child_checkbox" type="checkbox" value="4" /></td>
<td>ferrari</td>
<td>5000000</td>
</tr>
</table>
</body>
</html>
//Jquery Code
<script language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.child_checkbox').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".child_checkbox").click(function(){
if($(".child_checkbox").length == $(".child_checkbox:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</script>
Live demo Of select all checkbox
| car | Price | |
|---|---|---|
| mercidiz | 10000000 | |
| swift | 700000 | |
| BMW | 2000000 | |
| ferrari | 5000000 |
