Archive for April, 2008
How to add the “Select All/ DeSelect All” checkbox to the Webpage in javascript?
How to add the “Select All/ DeSelect All” checkbox to the Webpage in javascript?
Some samples as following:
<script language= “JavaScript “>
function cball(obj)
{
for(i = 0;i <document.getElementsByName( “m “).length;i++)
{
document.getElementsByName( “m “)[i].checked=obj.checked
}
}
function cball2(obj)
{
for(i = 0;i <document.getElementsByTagName( “INPUT “).length;i++)
{
if(document.getElementsByTagName( “INPUT “)[i].name.substr(0,1)== “m “)
{
document.getElementsByTagName( “INPUT “)[i].checked=obj.checked
}
}
}
</script>
<form name= ‘f1 ‘ id= ‘f1 ‘>
<input name= “allcheckbox ” type= “checkbox ” title= ‘Select All/Deselect All ‘ onclick= “cball(this) “> Select All<br/>
<input name= “m ” type= “checkbox ” onclick= ‘ ‘> <br/>
<input name= “m ” type= “checkbox ” onclick= ‘ ‘> <br/>
<input name= “m ” type= “checkbox ” onclick= ‘ ‘> <br/>
<input name= “m ” type= “checkbox ” onclick= ‘ ‘> <br/>
<input name= “m ” type= “checkbox ” onclick= ‘ ‘> <br/>
<input name= “m ” type= “checkbox ” onclick= ‘ ‘> <br/>
</form>
Another one sample is:
when select all checkbox, the “Select ALL/DeSelect All” checkbox should checked automatically:
<script language= “javascript “>
function cball(){
//alert(document.getElementById( “all “).checked)
var oform=document.getElementById( “f1 “);
var oc=oform.childNodes;
for (i=0;i <oc.length;i++){
if ((oc(i).type)== “checkbox “)
oc(i).checked=(document.getElementById( “all “).checked?true:false);
}
}
function cnall(obj){
var ock=document.getElementById( “all “);
var noChek=0;
if (obj.checked==false)
ock.checked=false;
var oform=document.getElementById( “f1 “);
var oc=oform.childNodes;
//alert(obj.checked);
for (i=0;i <oc.length;i++){
if ((oc(i).type)== “checkbox “){
if (oc(i).checked==true)
noChek+=1;
}
}
//alert(noChek);
if (noChek==6)
ock.checked=true;
}
</script>
<form name= ‘f1 ‘ id= ‘f1 ‘>
<input id= “all ” name= “allcheckbox ” type= “checkbox ” title= ‘SelectDeSelect’ onclick= “cball() “>Select All<br/>
<input name= “m1 ” type= “checkbox ” onclick= ‘cnall(this) ‘> <br/>
<input name= “m2 ” type= “checkbox ” onclick= ‘cnall(this) ‘> <br/>
<input name= “m3 ” type= “checkbox ” onclick= ‘cnall(this) ‘> <br/>
<input name= “m4 ” type= “checkbox ” onclick= ‘cnall(this) ‘> <br/>
<input name= “m5 ” type= “checkbox ” onclick= ‘cnall(this) ‘> <br/>
<input name= “m6 ” type= “checkbox ” onclick= ‘cnall(this) ‘> <br/>
</form>
