Demo- Automatically check uncheck checkboxes using JavaScript.
-------------------------------------------------------------------------------------------------------
<script language="javascript" type="text/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;}}}}function checkUsingLink(checked){var formName="formMultipleCheckBox";var checkBoxName="checkBoxesProgrammingLanguages[]";var form=document.forms[formName];var noOfCheckBoxes=form[checkBoxName].length;for(var x=0;x<noOfCheckBoxes;x++){if(checked==1){if(form[checkBoxName][x].checked==false){form[checkBoxName][x].checked=true;}}else{if(form[checkBoxName][x].checked==true){form[checkBoxName][x].checked=false;}}}return false;}function checkUsingButton(){var formName="formMultipleCheckBox";var checkBoxName="checkBoxesProgrammingLanguages[]";var form=document.forms[formName];var noOfCheckBoxes=form[checkBoxName].length;var checked=document.getElementById("checked_or_unchecked").value;for(var x=0;x<noOfCheckBoxes;x++){if(checked==1){if(form[checkBoxName][x].checked==false){form[checkBoxName][x].checked=true;}}else{if(form[checkBoxName][x].checked==true){form[checkBoxName][x].checked=false;}}}if(checked==true){document.getElementById("checked_or_unchecked").value=0;document.getElementById("btn_check").value="Uncheck All";}else{document.getElementById("checked_or_unchecked").value=1;document.getElementById("btn_check").value="Check All";}return false;}
</script>
Demo- Automatically check uncheck checkboxes using JavaScript.
<table align="center" border="0" cellpadding="2" cellspacing="0" class="table_blue_border">
<tbody>
<tr>
<td align="right" class="table_blue_td1" colspan="2"><form action="" id="formMultipleCheckBox" method="post">
<table align="left" border="0">
<tbody>
<tr>
<td colspan="9">Select at least one programming language </td>
</tr>
<tr>
<td><label>
<input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]" type="checkbox" value="1" />
Java</label></td>
<td><label>
<input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="2" />
C++</label></td>
<td></td>
<td><label>
<input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="3" />
Python</label></td>
<td></td>
<td><label>
<input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="4" />
Pearl</label></td>
<td></td>
<td></td>
<td rowspan="6"></td>
</tr>
<tr>
<td><label>
<input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="5" />
PHP </label></td>
<td><label>
<input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="6" />
VB.net</label></td>
<td></td>
<td><label>
<input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="7" />
C#</label></td>
<td></td>
<td><label>
<input id="checkBoxesProgrammingLanguages[]" name="checkBoxesProgrammingLanguages[]2" type="checkbox" value="8" />
Ruby</label></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left" colspan="2" id="display_status"></td>
<td align="left"><label></label></td>
<td align="center" colspan="2"></td>
<td align="center"></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left" colspan="5" id="display_status">Check/Uncheck using checkbox </td>
<td>
<input id="checkAll" name="checkAll" onClick="javascript:checkThemAll(this);" type="checkbox" value="1" />
Check All </td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left" colspan="5" id="display_status">Check/Uncheck using link </td>
<td><a href="javascript:void(0);" onClick="javascript:checkUsingLink(1);"> Check All</a></td>
<td><a href="javascript:void(0);" onClick="javascript:checkUsingLink(0);">UnCheck All</a></td>
<td></td>
</tr>
<tr>
<td align="left" colspan="5" id="display_status">Check/Uncheck using button </td>
<td align="left" colspan="2">
<input id="btn_check" name="btn_check" onClick="javascript:checkUsingButton();" type="button" value="Check All" />
</td>
<td><input id="checked_or_unchecked" name="checked_or_unchecked" type="hidden" value="1" /></td>
</tr>
</tbody>
</table>
</form></td>
</tr>
</tbody>
</table>
No comments:
Post a Comment