jQuery Multiple Checkbox Select / Deselect


 

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

Download Source Code

Ads