Multiple Checkbox Select/Deselect jquery
<STYLE>
body, input{
font-family: Calibri, Arial;
margin:0px;
}
h1 {
margin: 0 0 0 20px;
}
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
#header {
height:50px;
background-color:#ddd;
border-bottom:1px solid #aaa;
width:100%;
}
#footer {
font-size: 12px;
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align:center;
}
table {
width: 300px;
border: 1px solid;
border-collapse:collapse;
margin: 0 0 0 20px;
}
th {
background-color:#3E6DB0;
color: white;
padding: 5px;
}
</STYLE>
<H1>Multiple Checkbox Select/Deselect</H1>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Programming Language</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>PHP Programming</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Java Script</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Jquery</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>Java</td>
</tr>
</table>
<SCRIPT>
$(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>
