Here is the jQuery implementation of Select All checkbox functionality inside a
HTML table.
Try out the attached working sample.
HTML:
<table
border="1">
<tr><th><input
type="checkbox"
id="selectall"
/></th>
<th>Heading1
</th><th>Heading2
</th>
</tr>
<tr>
<td
align="center">
<input
type="checkbox"
class="case"
name="case"
value="1"
/> </td>
<td>Row1</td>
<td>Row1</td>
</tr>
<tr>
<td
align="center">
<input
type="checkbox"
class="case"
name="case"
value="2"
/></td>
<td>Row2</td>
<td>
Row2</td>
</tr>
jQuery:
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
<script
type="text/javascript"
>
$(document).ready(function() {
// add multiple select / deselect functionality
$("#selectall").click(function()
{
$('.case').attr('checked',
this.checked);
});
// if all checkbox are selected, check the
selectall checkbox also
$(".case").click(function()
{
if ($(".case").length
== $(".case:checked").length) {
$("#selectall").attr("checked",
"checked");
}
else {
$("#selectall").removeAttr("checked");
}
});
});
</script>
Thanks shinu .