Introduction: Sometimes we need a form with
options for listing multiple sets of check boxes, along with "Select
All" options. Users should be able to check individual check box or check
all check boxes by selecting “select all” option.
The following JQuery implements the
multi select/unselect options.
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<TITLE>select check boxes separately or all</TITLE>
<SCRIPT language="javascript">
$(function(){
// if 'chkAll' checkbox is checked, then check all checkboxes
//check boxes belong to 'chk' class
$("#chkall").click(function () {
$('.chk').attr('checked', this.checked);
});
// if number of checkboxes is equal to number of
//selected checkboxes, then check 'chkAll' checkbox
$(".chk").click(function(){
if($(".chk").length == $(".chk:checked").length) {
$("#chkall").attr("checked", "checked");
} else {
$("#chkall").removeAttr("checked");
}
});
});
</SCRIPT>
</HEAD>
<BODY>
<H2> Select your skills</H2>
<table border="1" bgcolor="lightgreen" width=40%>
<tr>
<th><input type="checkbox" id="chkall"/></th>
<th>Skills</th>
<th>Level</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="chk" name="skill" value="1"/></td>
<td>C++</td>
<td>Advanced</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="chk" name="skill" value="2"/></td>
<td>C#</td>
<td>Advanced</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="chk" name="skill" value="3"/></td>
<td>Java</td>
<td>Advanced</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="chk" name="skill" value="4"/></td>
<td>Socket Programming</td>
<td>Advanced</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="chk" name="skill" value="5"/></td>
<td>Data Mining</td>
<td>Advanced</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="chk" name="skill" value="6"/></td>
<td>SQL Server</td>
<td>Advanced</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="chk" name="skill" value="7"/></td>
<td>Oracle</td>
<td>Advanced</td>
</tr>
</table>
</BODY>
</HTML>
Output:
No comments:
Post a Comment