Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2003
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    check all checkboxes that have same "prefix" in name

    This may or may not be possible, but I thought I'd try.

    First let me explain my approach. I am working on an article search for a newspaper site. I'm working on a page that provides the user with advanced controls to limit or refine the search.

    The search itself (the CGI side of it) works great. However, I think it would be a great convenience to have a "check all" or "check none" for various sub groups.

    For example, there is a "months" section. If they only want to search articles that were published in January, they can select that box and uncheck the other months. It would be convenient to have a "check all months" or "uncheck all months" for that part of the search form.

    Here's where it gets complicated: the available years checkboxes are dynamic. My code queries the database to determine what years the article archive has articles for (in other words, if we don't have articles from the year 1999, I don't want a checkbox for the year 1999). From a javascript point of view, it could be hard to code, because the form may be different from time to time.

    Each section of the form has something in common: the same prefix in the name. For example, in the years section, the "name" of each checkbox may be as follows: "year_2003," "year_2004," "year_2005" and so on. The months are the same: "month_01," "month_02" .... "month_12" etc.

    I could have my CGI generate a javascript each time it loads that statically handles every checkbox in the form, but that could get really hairy from a CGI stand point. I'd rather not do that if I can avoid it.

    Is there a way I can write a single javascript function that checks all boxes in a particular form with the same "prefix" in the name? Or do you have a better idea to handle this.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    var 
    cbAry=new Array('tom','fred');
    var 
    cbNameAry=new Array('X','X');
    var 
    ips,OK;

    function 
    InitCkBx(){
     
    ips=document.getElementsByTagName('INPUT');
     for (
    i=0;i<ips.length;i++){
      if (
    ips[i].type=='checkbox'){
       for (
    i1=0;i1<cbAry.length;i1++){
        if (
    ips[i].name.match(cbAry[i1])){
         if (
    cbNameAry[i1]=='X'){ cbNameAry[i1]=new Array(); }
         
    cbNameAry[i1][cbNameAry[i1].length]=ips[i];
        }
       }
      }
     }
    }

    function 
    CkBxCheck(){
     for (
    i=0;i<cbNameAry.length;i++){
      
    OK=0;
      for (
    i1=0;i1<cbNameAry[i].length;i1++){
       if (
    cbNameAry[i][i1].checked){
        
    OK=1
       
    }
      }
      if (!
    OK){
       
    alert('None Checked in Group '+cbAry[i]);
      }
     }

    }

    //-->
    </script></head>

    <body onload="InitCkBx()" >
    <br>
    Group fred<br>
    <input type="checkbox" name="fred1">
    <input type="checkbox" name="fred2">
    <input type="checkbox" name="fred3">
    <input type="checkbox" name="fred4">
    <input type="checkbox" name="fred5">
    <br>
    Group tom<br>
    <input type="checkbox" name="tom1">
    <input type="checkbox" name="tom2">
    <input type="checkbox" name="tom3">
    <input type="checkbox" name="tom4">
    <br>
    <input type="button" name="" value="Check" onclick="javascript:CkBxCheck();" >

    </body>

    </html> 

  • #3
    New Coder
    Join Date
    Feb 2003
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Interesting functions...

    I think I follow most of it, but could you clarify what it does? The thing that is really throwing me off is the initCxBx function...

    What I need is a link that checks or uncheck all the boxes in a particular group when it is invoked. For example, when a user clicks on the text link "Check all months" it needs to check all the "month" checkboxes. When a user clicks on the text link "Uncheck all years" it needs to uncheck all the "year" checkboxes.

    In other words, its a convenience for my users. They could manually check or uncheck all the boxes as needed, but the javascript link makes that happen instantly.

    Thanks

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Thought you wanted at least one of each group to be checked

    this is chech.uncheck all

    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    ckBoxAry=new Array();

    function 
    CheckBox(cb,txt){
     
    obj=document.getElementById(cb);
     
    obj.ary=new Array();
     
    obj.txt=document.getElementById(txt);
     
    cks=obj.getElementsByTagName('INPUT');
     for (
    i=0;i<cks.length;i++){
      if (
    cks[i].type=='checkbox'){
       
    obj.ary[obj.ary.length]=cks[i];
       if (
    i<cks.length-1){
        
    cks[i].onclick=function(){ change(this.parentNode.ary,this.parentNode.txt); }
       }
       else {
        
    cks[i].onclick=function(){ CheckAllNone(this.parentNode.ary,this.parentNode.txt); }
       }
      }
     }
     
    change(obj.ary,obj.txt);
    }

    function 
    change(ary,txt){
     
    ckCnt=0;
     for (
    i=0;i<ary.length;i++){
      if (
    ary[i].checked){
       
    ckCnt++;
      }
     }
     
    txt.innerHTML='Select All';
     if (
    ckCnt==ary.length-1){
      
    txt.innerHTML='Select None';
     }
    }

    function 
    CheckAllNone(ary,txt){
     
    ary[ary.length-1].checked=false;
     
    checked=true;
     if (
    txt.innerHTML=='Select None'){
      
    checked=false;
     }
     for (
    i=0;i<ary.length-1;i++){
      
    ary[i].checked=checked;
     }
     
    change(ary,txt);
    }

    //-->
    </script>

    </head>

    <body onload="CheckBox('CkGroup1','ckAllNone1');CheckBox('CkGroup2','ckAllNone2')" >

    <p id="CkGroup1" >
    Group 1<br>
    <input type="checkbox" name="" checked=true ><br>
    <input type="checkbox" name=""><br>
    <input type="checkbox" name=""><br>
    <input type="checkbox" name=""><br>
    <input type="checkbox" name="" ><span id=ckAllNone1 >Select All</span><br>
    </p>
    <br>
    <p id="CkGroup2" >
    Group 2<br>
    <input type="checkbox" name="" ><br>
    <input type="checkbox" name=""><br>
    <input type="checkbox" name=""><br>
    <input type="checkbox" name=""><br>
    <input type="checkbox" name="" ><span id=ckAllNone2 >Select All</span><br>
    </p>

    </body>

    </html>

    I will make one to use the names 

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    useing names

    PHP Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    var 
    cbAry=new Array('tom','fred');
    var 
    cbNameAry=new Array('X','X');
    var 
    ips,OK,obj;

    function 
    InitCkBx(){
     
    ips=document.getElementsByTagName('INPUT');
     for (
    i=0;i<ips.length;i++){
      if (
    ips[i].type=='checkbox'){
       for (
    i1=0;i1<cbAry.length;i1++){
        if (
    ips[i].name.match(cbAry[i1])){
         if (
    cbNameAry[i1]=='X'){ cbNameAry[i1]=new Array(); }
         
    cbNameAry[i1][cbNameAry[i1].length]=ips[i];
         
    ips[i].onclick=function(){ CkBxCheck(); }
        }
       }
      }
     }
     
    CkBxCheck();
    }

    function 
    CkBxCheck(){
     for (
    i=0;i<cbNameAry.length;i++){
      
    document.getElementById(cbAry[i]).value='Check All';
      
    OK=0;
      for (
    i1=0;i1<cbNameAry[i].length;i1++){
       if (
    cbNameAry[i][i1].checked){
        
    OK++;
       }
       if (
    OK==cbNameAry[i].length){
        
    document.getElementById(cbAry[i]).value='Check None';
       }
      }
     }
    }

    function 
    CkBxAllNone(obj){
     
    OK=-1;
     for (
    i=0;i<cbNameAry.length;i++){
      if(
    cbNameAry[i][0].name.match(obj.id)){
       
    OK=i;
      }
     }
     if (
    OK<0){
      
    alert('Error');
      return;
     }
     
    obj=document.getElementById(obj.id);
     if  (
    obj.value=='Check All'){
      
    obj.value='Check None';
      for (
    i1=0;i1<cbNameAry[OK].length;i1++){
       
    cbNameAry[OK][i1].checked=true;
      }
     }
     else {
      
    obj.value='Check All';
      for (
    i1=0;i1<cbNameAry[OK].length;i1++){
       
    cbNameAry[OK][i1].checked=false;
      }
     }
    }

    //-->
    </script></head>

    <body onload="InitCkBx()" >
    <br>
    Group fred<br>
    <input type="checkbox" name="fred1">
    <input type="checkbox" name="fred2">
    <input type="checkbox" name="fred3">
    <input type="checkbox" name="fred4">
    <input type="checkbox" name="fred5">
    <br>
    <input type="button" id="fred" value="Check All" onclick="javascript:CkBxAllNone(this);" ><br>
    <br>
    Group tom<br>
    <input type="checkbox" name="tom1">
    <input type="checkbox" name="tom2">
    <input type="checkbox" name="tom3">
    <input type="checkbox" name="tom4">
    <br>
    <input type="button" id="tom" value="Check All" onclick="javascript:CkBxAllNone(this);" ><br>

    </body>

    </html> 

  • #6
    New Coder
    Join Date
    Feb 2003
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First of all, thank you for your help. You have been very, very helpful.

    I didn't use your exact code, but I was able to construct my own code based on your examples. You were a big help.

    Here's my code:
    Code:
    # pf="prefix" and ck="checked" (0|1)
    function checkall (pf,ck) { 
      cbox=document.getElementsByTagName('INPUT');  
      for (i=0; i<cbox.length; i++){
        if (cbox[i].type=='checkbox'){ 
          if (cbox[i].name.indexOf(pf) > -1) { 
            if (ck == "1") { cbox[i].checked = true; } else { cbox[i].checked = null; }
          }
        }
      } 
    }
    Then I can check all the "months" checkbox with this link:
    Code:
    <a href="javascript:checkall('page','1');">Check all</a>
    That way, all checkboxes with "page" in them are checked. I then call this function again for other sections, changing 'page' to other things like 'month' or 'year' ... and it works great.

    Thank you.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •