Ultra fast cheap  linux and windows hosting
See the new scripts recently added to Dynamic Drive. Click here.
Original, practical CSS codes and examples such as CSS menus for your site.
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