Home >> Tutorials >> Javascript tutorials
Invert the Check Box selection
Learn how to invert the current checkbox selection. The following piece of javascript will invert the checkboxes. To test it, first check any 2 check boxes below and then click invert button.
Example1:
Example2:
Example1:
<script language=JavaScript>
function set(n)
{
temp = document.form1.elements.length ;
for (i=0; i < temp; i++)
{ document.form1.elements[i].checked=n;
}
}
function Invers(){
temp = document.form1.elements.length ;
for (i=0; i < temp; i++){
if(document.form1.elements[i].checked == 1){document.form1.elements[i].checked = 0;}
else {document.form1.elements[i].checked = 1}
}
}
</script>
<FORM method=post name=form1>
<INPUT name=check1 type=checkbox >
<INPUT name=check1 type=checkbox >
<INPUT name=check1 type=checkbox >
<INPUT name=check1 type=checkbox >
<INPUT name=check1 type=checkbox >
<INPUT name=button onclick=Invers() type=button value=" Invert ">
<INPUT name=button onclick=set(0) type=button value=" Reset ">
</form>
Example2:
<script language=JavaScript>
function checkall()
{
void(d=document);
void(el=d.getElementsByName('check'));
for(i=0;i<el.length;i++)
void(el[i].checked=1)
}
function Invert(){
temp = document.form2.elements.length ;
for (i=0; i < temp; i++){
if(document.form2.elements[i].checked == 1){document.form2.elements[i].checked = 0;}
else {document.form2.elements[i].checked = 1}
}
}
</script>
<form name=form2>
<input type=checkbox name="check">
<input type=checkbox name="check">
<input type=checkbox name="check">
<input type=checkbox name="check">
<input type=checkbox name="check">
<input type=checkbox name="check">
<input type=checkbox name="check">
<input type=button onClick="checkall()" value="Check All" name="button">
<INPUT name=button onclick=Invert() type=button value=" Invert ">
</form> |
Page contents: itechies.net – Learn how to invert the CheckBox selection using javascript
|
