Introduction:
This article explains, check / uncheck multiple checkboxes using a single checkbox. You may have noticed this functionality on websites like gmail.com or outlook.com which allows you to select all emails on the page using a single select all feature.
HTML:
-----------------------------------------------------------------------------------------------------------------
<HTML> <HEAD> <script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.3.2/jquery.min.js">
</script> <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE> </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>
-----------------------------------------------------------------------------------------------------------------
The jQuery Code:
-----------------------------------------------------------------------------------------------------------------
<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>
-----------------------------------------------------------------------------------------------------------------
No comments:
Post a Comment