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.
Try It!
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>
<!--
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> </td>
<td><label>
<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="3" />
Python</label></td>
<td> </td>
<td><label>
<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="4" />
Perl</label></td>
<td> </td>
<td> </td>
<td rowspan="6"> </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> </td>
<td><label>
<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="7" />
C#</label></td>
<td> </td>
<td><label>
<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="8" />
Ruby</label></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="left" id="display_status"> </td>
<td align="left"><label></label></td>
<td colspan="2" align="center"> </td>
<td align="center"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="5" align="left" id="display_status">Check/Uncheck using checkbox </td>
<td> <input name="checkAll" type="checkbox" id="checkAll" value="1" onclick="javascript:checkThemAll(this);" />
Check All </td>
<td> </td>
<td> </td>
</tr></table></form>
</body>
</html>
<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> </td>
<td><label>
<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="3" />
Python</label></td>
<td> </td>
<td><label>
<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="4" />
Perl</label></td>
<td> </td>
<td> </td>
<td rowspan="6"> </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> </td>
<td><label>
<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="7" />
C#</label></td>
<td> </td>
<td><label>
<input name="checkBoxesProgrammingLanguages[]" type="checkbox" id="checkBoxesProgrammingLanguages[]" value="8" />
Ruby</label></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="left" id="display_status"> </td>
<td align="left"><label></label></td>
<td colspan="2" align="center"> </td>
<td align="center"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="5" align="left" id="display_status">Check/Uncheck using checkbox </td>
<td> <input name="checkAll" type="checkbox" id="checkAll" value="1" onclick="javascript:checkThemAll(this);" />
Check All </td>
<td> </td>
<td> </td>
</tr></table></form>
</body>
</html>
©-Copyright By Duminda Chamara
JavaScript Validation
JavaScript Validation
1 comments:
Thanks for your help
Post a Comment