Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials
Javascript >> checkbox

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
javascript tutorial
javascript book
Buy this book