Archive for April, 2008

How to add the “Select All/ DeSelect All” checkbox to the Webpage in javascript?

Posted on April 7, 2008. Filed under: 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>

Read Full Post | Make a Comment ( None so far )

Liked it here?
Why not try sites on the blogroll...