SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    india
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Checkboxes

    Hi everybody in here!

    I need some javascript code and hope somebody is going to help me here.

    The scenario is like, I have many check boxes on a page that are actually generated on the fly depending on the user input. And these check boxes are a group of 3 check boxes each, something like...

    left side right side both sides

    Now what I want is, the 'left side' and the 'right side' check boxes can be checked without the 'both sides' check box checked. And if a user checks either 'left side' or 'right side' or both the 'left side' and the 'right side' checkboxes and then tries to check the 'both sides' check box then the 'both sides' check box should get checked and automatically the 'left' and the 'right' side check boxes (which ever is checked) should get unchecked.

    This must be actually simply to do with the javascript but the problem is, as I have mentioned earlier, there are many such groups of check boxes on a single page.

    So can anybody please show me some code to handle all those check boxes?

    Thanks all,
    waiting for a reply...
    Cheers!

  2. #2
    Tranceoholic lilleman's Avatar
    Join Date
    Feb 2004
    Location
    Írebro, Sweden
    Posts
    2,716
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    This piece of code have been tested in Mozilla Firefox 1.0 and IE6.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>Javascript: checking of checkboxes</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <script type="text/javascript">
       var checks = new Array('left', 'right', 'both');
       
       window.onload = function()
       {
         document.getElementById(checks[0]).onclick = check;
         document.getElementById(checks[1]).onclick = check;
         document.getElementById(checks[2]).onclick = check;
       }
       
       function check()
       {
         if( this.id == checks[2] )
         {
           document.getElementById(checks[0]).checked = false;
           document.getElementById(checks[1]).checked = false;
           
           return true;
         }
         else return !document.getElementById(checks[2]).checked;
       }
      </script>
     </head>
     
     <body>
      <input type="checkbox" id="left" name="left" /> Left side
      <input type="checkbox" id="right" name="right" /> Right side
      <input type="checkbox" id="both" name="both" /> Both sides
     </body>
    </html>
    Yours, Erik.
    ERIK RIKLUND :: Yes, I've been gone quite a while.

  3. #3
    SitePoint Member
    Join Date
    Jan 2005
    Location
    india
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Erik, thanks so much for your time and help. I tried to use your code and it works great, but with only the first set of three checkboxes. As I have mentioned earlier in my post, I have many such sets of 3 checkboxes on the page.

    You can see exactly what I am trying to do if you visit:

    http://www.takeoutmadeeasy.com/viewm...restaurantid=5

    Please go here and select a pizza from the list and then press the 'Continue' button. When you move to the next page, you are allowed to choose 'Toppings' for your pizza and here is where I want to implement the code I requested.

    I am already using a javascript to calculate the total for the items selected and display the same at the bottom of the page and I was trying for some code (for the selection and deselection of the checkboxes) that could be integrated in the present code.

    The names for each set of three checkboxes are like...

    starting from 1000 for the 'left side' checkbox
    starting from 2001 for the 'right side' checkbox and
    starting from 3000 for the 'both sides' checkbox

    for example... the name of the 'left side' checkbox from the first set would be 'CB1000'

    and from the second set would be 'CB1001'

    etc.

    What I was trying was something like:

    PHP Code:
    if(ItemSel.name.substring(2,99)>2999) {
    // if the selected checkbox is 'both sides'

    var rightside ItemSel.name.substring(2,99) - 1000;
    var 
    leftside ItemSel.name.substring(2,99) - 2000;

    // and something here that could recognize the [U]related[/U] checkboxs for 'right' and 'left' side for this [U]particular [/U] 'bothside' checkbox and uncheck them if they are checked.
                

    Why I want to integrate the 'deselection' code with the present javascript is so that it doesn't effect the calculations. (When i used your code, it was not calculating the sum for the checkboxes anymore).

    I know I might be confusing, but if you look at the page in working you can get the right idea of what i am trying to achieve.

    I am a PHP programmer and do not know much of the Javascripting (I call myself a PHP programmer though I am still learnig to code in PHP ) and would really be grateful if you can help me out with this.

    Waiting for a reply...
    Thanks again!

  4. #4
    SitePoint Member
    Join Date
    Jan 2005
    Location
    india
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is anybody please going to help me out here

  5. #5
    Tranceoholic lilleman's Avatar
    Join Date
    Feb 2004
    Location
    Írebro, Sweden
    Posts
    2,716
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    First, let me apologize for the time it took me to response. I will give it a go, but I just have a quick question. Why does the number of the right checkbox start from 2001, and not 2000? Not that it makes it all much harder, but it would be more logical if it started from 2000.

    Yours, Erik.
    ERIK RIKLUND :: Yes, I've been gone quite a while.

  6. #6
    SitePoint Member
    Join Date
    Jan 2005
    Location
    india
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks soooooo much to consider my request Erik!!!
    As for the number 2001 for the right... I am sorry, I wrote that wrong. It was actually...

    starting from 1001 for the 'left side' checkbox
    starting from 2000 for the 'right side' checkbox and
    starting from 3000 for the 'both sides' checkbox

    Though it didn't make any difference, I now changed it to...

    starting from 1001 for the 'left side' checkbox
    starting from 2001 for the 'right side' checkbox and
    starting from 3001 for the 'both sides' checkbox

    for it to be more logical as you advised.

    Thanks again for your time and help! Will be waiting for your reply!

    Cheers!

  7. #7
    Tranceoholic lilleman's Avatar
    Join Date
    Feb 2004
    Location
    Írebro, Sweden
    Posts
    2,716
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The code have been tested in Mozilla Firefox 1.0 and IE6.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>Javascript: checkbox controlling</title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <script type="text/javascript">
       window.onload = function()
       {
         var boxes = document.getElementsByTagName('input');
         
         for( var b = 0; b < boxes.length; b++ )
          if( boxes[b].type == 'checkbox' && boxes[b].id.substring(0,2) == 'CB' )
            boxes[b].onclick = check;
       }
       
       function check()
       {
         var number = new Number(this.id.substring(2,6));
         var boxnum = new String(number).substring(1,4);
         
         if( number >= 3001 )
         {
           document.getElementById('CB' + ( number - 2000 )).checked = false;
           document.getElementById('CB' + ( number - 1000 )).checked = false;
           
           return true;
         }
         
         return !document.getElementById('CB3' + boxnum).checked;
       }
      </script>
     </head>
     
     <body>
      <div>
       <input id="CB1001" type="checkbox" name="CB1001" /> <label for="CB1001">Left</label>
       <input id="CB2001" type="checkbox" name="CB2001" /> <label for="CB2001">Right</label>
       <input id="CB3001" type="checkbox" name="CB3001" /> <label for="CB3001">Both</label>
      </div>
      <div>
       <input id="CB1002" type="checkbox" name="CB1002" /> <label for="CB1002">Left</label>
       <input id="CB2002" type="checkbox" name="CB2002" /> <label for="CB2002">Right</label>
       <input id="CB3002" type="checkbox" name="CB3002" /> <label for="CB3002">Both</label>
      </div>
     </body>
    </html>
    Yours, Erik.
    ERIK RIKLUND :: Yes, I've been gone quite a while.


Bookmarks

Posting Permissions

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