<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<TITLE>Rz Rasel</TITLE>
<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>
</HEAD>
<BODY>
<div id="container">
<div id="header">
<H1>Multiple Checkbox Select/Deselect</H1>
</div>
<p> </p>
<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>
</div>
<div id="footer">
Copyright © Rz Rasel
</div>
</BODY>
<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>
</HTML> |
Post a Comment