Javascript Essentials Part 5

Check Un-Check All From Check Boxes

Check or un-check check boxes by a single button.

<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
checkflag = "true";
return "Uncheck All"; }
else {
for (i = 0; i < field.length; i++) {
field[i].checked = false; }
checkflag = "false";
return "Check All"; }
}
</script>
</HEAD>
<BODY>
<center>
<form name=myform action="" method=post>
<table>
<tr><td>
<b>Your Favorite Scripts & Languages</b><br>
<input type=checkbox name=list value="1">Java<br>
<input type=checkbox name=list value="2">JavaScript<br>
<input type=checkbox name=list value="3">ASP<br>
<input type=checkbox name=list value="4">HTML<br>
<input type=checkbox name=list value="5">SQL<br>
<br>                                                    
<input type=button value="Check All" onClick="this.value=check(this.form.list)"> 
</td></tr>
</table>
</form>
</center>
</body>
</html>

Check Uncheck All – By Check Box

Instead of button we can use a check box to check or un-check all boxes.

<html>
<HEAD>
<script type="text/javascript">
function checkAll(checkname, exby) {
  for (i = 0; i < checkname.length; i++)
  checkname[i].checked = exby.checked? true:false
}
</script>
</HEAD>
<BODY>
<form name ="mylist">
  <input type="checkbox" name="checkGroup" value ="first">First<br>
  <input type="checkbox" name="checkGroup" value ="second">Second<br>
  <input type="checkbox" name="checkGroup" value ="third">Third<br>
  <input type="checkbox" name="checkGroup" value ="fourth">Fourth<br>
  <input type="checkbox" name="all" onClick="checkAll(document.mylist.checkGroup,this)">Check/Uncheck All<br>
</form>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *