Sunday, March 14, 2010

How to automatically check multiple checkboxes


How to automatically check/uncheck multiple checkboxes


Following example shows you how to automatically check or uncheck multiple checkboxes using simple javascript.
Some occasions you may want to check or uncheck more than one check box automatically using single mouse click. You can use simple javascript program to perform your need. You may have seen this in some web mail programs such as Gamil, Yahoo or Hotmail. Three you can check or uncheck multiple check boxes using single click. In this example check box and link used to make your selection.
Demo- Automatically check uncheck checkboxes using JavaScript.




Select at least one programming language
Check/Uncheck using checkbox   Check All
Check/Uncheck using link  Check All UnCheck All
Check/Uncheck using button  
Try It!
Bookmark and Share

1. Example code for check/uncheck multiple check boxes.

JavaScript Code
<script type="text/javascript" language="javascript">

<!--

function checkThemAll(chk){

var formName = "formMultipleCheckBox";

var checkBoxName="checkBoxesProgrammingLanguages[]";

var form = document.forms[formName];

var noOfCheckBoxes = form[checkBoxName].length;

for(var x=0;x<noOfCheckBoxes;x++){

if(chk.checked==true){

if(form[checkBoxName][x].checked==false){

form[checkBoxName][x].checked=true;

}

}else{

if(form[checkBoxName][x].checked==true){

form[checkBoxName][x].checked=false;

}

}

}

}

-->

</script>
HTML Code


<html>

<head><title>How to automatically check multiple check boxes using JavaScript </title>

</head><body><form id="formMultipleCheckBox" name="formMultipleCheckBox"> <table border="0">

<tr>

<td colspan="9">Select at least one programming language </td>

</tr>

<tr>

<td><label>

<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="1" />

Java</label></td>

<td><label>

<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="2" />

C++</label></td>

<td>&nbsp;</td>

<td><label>

<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="3" />

Python</label></td>

<td>&nbsp;</td>

<td><label>

<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="4" />

Perl</label></td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td rowspan="6">&nbsp;</td>

</tr>

<tr>

<td><label>

<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="5" />

PHP </label></td>

<td><label>

<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="6" />

VB.net</label></td>

<td>&nbsp;</td>

<td><label>

<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="7" />

C#</label></td>

<td>&nbsp;</td>

<td><label>

<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="8" />

Ruby</label></td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td colspan="2" align="left" id="display_status">&nbsp;</td>

<td align="left"><label></label></td>

<td colspan="2" align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td colspan="5" align="left" id="display_status">Check/Uncheck using checkbox </td>

<td>&nbsp;<input name="checkAll" type="checkbox" id="checkAll" value="1" onclick="javascript:checkThemAll(this);" />

Check All </td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr></table></form>

</body>

</html>

 »   How to get screen resolution in JavaScript
 »   How to limit characters in textarea using JavaScript
 »   How to validate decimal number in JavaScript
 »   How to validate an email address in JavaScript
 »   How to validate date using JavaScript
 »   JavaScript String functions
 »   How to validate multiple select list box in JavaScript
 »   How to generate random numbers in JavaScript
 »   How to validate multiple check box in JavaScript
 »   How to validate user login in JavaScript
 »   How to validate drop down list in JavaScript
 »   How to validate radio button group in JavaScript
 »   How to create JavaScript alerts
 »    How to create popup windows in JavaScript
 »   How to count words in a text area using JavaScript
©-Copyright By Duminda Chamara
JavaScript Validation