jQuery Multiple Checkbox Select / Deselect
In this section, you will learn how to create multiple checkbox group which select/deselect the group by clicking on the heading checkbox.
In this section, you will learn how to create multiple checkbox group which select/deselect the group by clicking on the heading checkbox.jQuery Multiple Checkbox Select / Deselect
In this section, you will learn how to create multiple checkbox group which select/deselect the group by clicking on the heading checkbox.
The jQuery Code is given below :
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
The complete code is given below :
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Droid X</td>
<td>4.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>HTC Desire</td>
<td>3/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Apple iPhone 4</td>
<td>5/5</td>
</tr>
</table>
</BODY>
</HTML>
ONLINE DEMO
Given below online
| Cell phone | Rating | |
|---|---|---|
| BlackBerry Bold 9650 | 2/5 | |
| Samsung Galaxy | 3.5/5 | |
| Droid X | 4.5/5 | |
| HTC Desire | 3/5 | |
| Apple iPhone 4 | 5/5 |
