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 8 of 8
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    checkbox question

    Hi,

    I know very little about js and need your help.

    My web form contains a load of checkboxes. 31 per row and one row for each of a number of rooms. I need to be able to check (say), row1 box 2 and when I check row1 box10, all boxes between 2 and 10 also check automatically. If I then check row2 box11 and row2 box15, then all on row two, between 11 and 15 will be checked. It's such a pain to have to check each one individually.

    Can this be done? Can any of you send me to a tutorial where I could work it out? Maybe one of you might have the time to code it for me? (Pm me if you need more )

    bazz
    Last edited by bazz; 10-07-2008 at 02:21 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function Check(nme){
     var cbs=document.getElementsByName(nme);
     for (var srt=-1,fin=-1,zxc0=0;zxc0<cbs.length;zxc0++){
      if (cbs[zxc0].checked){
       srt=zxc0;
       for (var zxc0a=zxc0+1;zxc0a<cbs.length;zxc0a++){
        if (cbs[zxc0a].checked) fin=zxc0a;
       }
       break;
      }
     }
     for (var zxc1=srt;zxc1<fin;zxc1++){
      cbs[zxc1].checked=true;
     }
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    <fieldset onclick="Check('tom[]');">
    <input type="checkbox" name="tom[]" /><input type="checkbox" name="tom[]" />
    <input type="checkbox" name="tom[]" /><input type="checkbox" name="tom[]" />
    </fieldset>
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thank you very much vic.

    That seems to work but I have a question...

    If I have two rows which are independent, should I make them use a name, different from tom and if so, would I need to make a duplicate cdata for that row or just modify the one you have done.

    The purpose is this..
    I have a row of 31 td's for room one and a row of 31 td's for room2 in an bookings thing. I need to be able to click, say, four days in rm1 and two in rm2

    my html is like this

    Code:
    <table>
    <tr>
      <td class='rooms_label'>1 </td>
      <td class="vacant"><input type='checkbox' name='booking' value="" />01</td>
      <td class="vacant"><input type='checkbox' name='booking' value="" />02</td>
      <td class="vacant"><input type='checkbox' name='booking' value="" />03</td>
      <td class="vacant"><input type='checkbox' name='booking' value="" />04</td>
    </tr>
    <tr>
      <td class='rooms_label'>2 </td>
      <td class="vacant"><input type='checkbox' name='booking' value="" />01</td>
      <td class="vacant"><input type='checkbox' name='booking' value="" />02</td>
      <td class="vacant"><input type='checkbox' name='booking' value="" />03</td>
    </tr>
    </table>
    bazz
    Last edited by bazz; 10-07-2008 at 06:43 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Blimey you have both been very helpful.

    If I could ask one more thing...

    The values would in fact be the date of month rather than room number. (1st to 31st on each row)

    So in your demo the first row would be room1 from 1st - 10th and the second row would be room2, 1st - 10th.

    Can it be set so that if room1 1st - 4th has been checked, that any other room checked for the same dates, would show an error message on screen?

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by Cranford View Post
    You wrote:

    Sorry, I won't play the "okay, THAT works, but what I really need is..." game.

    If you cannot, or will not completely and accurately describe the problem in your initial post...

    Ask for help, but stop trying to manipulate and exploit those who expend their valuable time to help you -- just you. Just YOU.

    I'm finished.
    I am not sure what I did to attract such a tirade of abuse.

    I am very grateful for the help you have given but, if you re-read my first post, you will see that I did actually explain it. And, no, I don't play that 'game' either.

    If you are unwilling to offer help then that is obviously your prerogative. But there is no need to 'go off on one' for no apparent reason.


    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    there must be an easier way but

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function Check(p,nme){
     var all=document.getElementsByName(nme);
     for (var allp,ary=[],zxc0=0;zxc0<all.length;zxc0++){
      if (all[zxc0].type=='checkbox'){
       allp=all[zxc0];
       while (allp.parentNode){
        allp=allp.parentNode;
        if (allp==p){
         ary.push(all[zxc0]);
         break;
        }
       }
      }
     }
     for (var srt=-1,fin=-2,zxc1=0;zxc1<ary.length;zxc1++){
      if (ary[zxc1].checked){
       srt=zxc1;
       for (var zxc1a=zxc1+1;zxc1a<ary.length;zxc1a++){
        if (ary[zxc1a].checked){
         fin=zxc1a;
        }
       }
       break;
      }
     }
     for (var zxc2=srt;zxc2<=fin;zxc2++){
      ary[zxc2].checked=true;
     }
     for (var cnt=1,zxc3=0;zxc3<ary.length;zxc3++){
      if (ary[zxc3].checked) cnt++;
    
     }
     for (var zxc4=0;zxc4<all.length;zxc4++){
      for (var zxc4a=0;zxc4a<ary.length;zxc4a++){
       if (all[zxc4]!=ary[zxc4a]&&all[zxc4].value==ary[zxc4a].value){
        if (fin>-2||(p.cnt&&cnt<p.cnt)) all[zxc4].checked=ary[zxc4a].checked;
       }
      }
     }
     p.cnt=cnt;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    <table>
    <tr id="a1" onclick="Check(this,'booking');" >
      <td class='rooms_label'>1 </td>
      <td class="vacant"><input type='checkbox' name='booking' value="1st" />01</td>
      <td class="vacant"><input type='checkbox' name='booking' value="2nd" />02</td>
      <td class="vacant"><input type='checkbox' name='booking' value="3rd" />03</td>
      <td class="vacant"><input type='checkbox' name='booking' value="4th" />04</td>
    </tr>
    <tr id="a2" onclick="Check(this,'booking');" >
      <td class="vacant"><input type='checkbox' name='booking' value="1st" />01</td>
      <td class="vacant"><input type='checkbox' name='booking' value="2nd" />02</td>
      <td class="vacant"><input type='checkbox' name='booking' value="3rd" />03</td>
      <td class="vacant"><input type='checkbox' name='booking' value="4th" />04</td>
    </tr>
    </table></form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    don't take it personally bazz, cranford went off on me for using php to generate html. so............... i'm assuming some sort of bipolar thing.

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by vwphillips View Post
    there must be an easier way but

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function Check(p,nme){
     var all=document.getElementsByName(nme);
     for (var allp,ary=[],zxc0=0;zxc0<all.length;zxc0++){
      if (all[zxc0].type=='checkbox'){
       allp=all[zxc0];
       while (allp.parentNode){
        allp=allp.parentNode;
        if (allp==p){
         ary.push(all[zxc0]);
         break;
        }
       }
      }
     }
     for (var srt=-1,fin=-2,zxc1=0;zxc1<ary.length;zxc1++){
      if (ary[zxc1].checked){
       srt=zxc1;
       for (var zxc1a=zxc1+1;zxc1a<ary.length;zxc1a++){
        if (ary[zxc1a].checked){
         fin=zxc1a;
        }
       }
       break;
      }
     }
     for (var zxc2=srt;zxc2<=fin;zxc2++){
      ary[zxc2].checked=true;
     }
     for (var cnt=1,zxc3=0;zxc3<ary.length;zxc3++){
      if (ary[zxc3].checked) cnt++;
    
     }
     for (var zxc4=0;zxc4<all.length;zxc4++){
      for (var zxc4a=0;zxc4a<ary.length;zxc4a++){
       if (all[zxc4]!=ary[zxc4a]&&all[zxc4].value==ary[zxc4a].value){
        if (fin>-2||(p.cnt&&cnt<p.cnt)) all[zxc4].checked=ary[zxc4a].checked;
       }
      }
     }
     p.cnt=cnt;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    <table>
    <tr id="a1" onclick="Check(this,'booking');" >
      <td class='rooms_label'>1 </td>
      <td class="vacant"><input type='checkbox' name='booking' value="1st" />01</td>
      <td class="vacant"><input type='checkbox' name='booking' value="2nd" />02</td>
      <td class="vacant"><input type='checkbox' name='booking' value="3rd" />03</td>
      <td class="vacant"><input type='checkbox' name='booking' value="4th" />04</td>
    </tr>
    <tr id="a2" onclick="Check(this,'booking');" >
      <td class="vacant"><input type='checkbox' name='booking' value="1st" />01</td>
      <td class="vacant"><input type='checkbox' name='booking' value="2nd" />02</td>
      <td class="vacant"><input type='checkbox' name='booking' value="3rd" />03</td>
      <td class="vacant"><input type='checkbox' name='booking' value="4th" />04</td>
    </tr>
    </table></form>
    </body>
    
    </html>
    Vic, thank you very much.

    I think I can merge that with my perl code and get it to continue to work as it does in a plain html page. I changed the second tr trigger and the param name to be a room_number and it works exactly as I hoped for.
    Edit: yup, it's merged and working

    Once again, thanks for your help.

    @ohgod: Not taken personally, I'm too long in the tooth for that. I still found him to be good at JS but a bit unpleasant at the same time. nuff said I think.

    bazz
    Last edited by bazz; 10-08-2008 at 08:09 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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