Web Analytics Made Easy -
StatCounter JavaScript checkbox addition - CodingForum

Announcement

Collapse
No announcement yet.

JavaScript checkbox addition

Collapse
This topic is closed.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • JavaScript checkbox addition

    Hi,

    I am a newbiee in JavaScript.



    I am attaching an image which will explain exactly wat I want. Firstly I have 4 rows (namely 0, 1, 2, 3). I want only 1 checkbox to be selected from amongst these at any given point of time. Once the visitor checks all the rows the rows should have an individual sum. Plus all the individual sums should be added together into the TOTAL.

    How would the code look in JavaScript? Please help.

    Nainil C.

  • #2
    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function zxcSubTotal(obj,id,tid){
     zxct=document.getElementById(tid);
     if (!zxct.ary){ zxct.ary=new Array(); }
     zxccbs=obj.getElementsByTagName('INPUT');
     for (zxc0=0;zxc0<zxccbs.length;zxc0++){
      if (zxccbs[zxc0].type=='checkbox'&&zxccbs[zxc0].checked){
       document.getElementById(id).value=zxccbs[zxc0].value;
       if (!zxccbs[zxc0].set){
        zxccbs[zxc0].set=true;
        zxct.ary[zxct.ary.length]=zxccbs[zxc0];
       }
      }
     }
     zxcv=0
     for (zxc1=0;zxc1<zxct.ary.length;zxc1++){
      if (zxct.ary[zxc1].checked){
       zxcv+=parseFloat(zxct.ary[zxc1].value);
      }
     }
     zxct.value=zxcv;
    }
    
    //-->
    </script>
    </head>
    
    <body  onload="f6_OneCheckBox()">
    <table border="1">
      <tr onclick="zxcSubTotal(this,'Group1','Total');">
        <td><input title="f6_Group1" type="checkbox" value="1" name=""></td>
        <td><input title="f6_Group1" type="checkbox" value="2" name=""></td>
        <td><input title="f6_Group1" type="checkbox" value="3" name=""></td>
        <td><input title="f6_Group1" type="checkbox" value="4" name=""></td>
        <td><input id="Group1"type="text" name="" size=10 ></td>
      </tr>
      <tr onclick="zxcSubTotal(this,'Group2','Total');">
        <td><input title="f6_Group2" type="checkbox" value="1" name=""></td>
        <td><input title="f6_Group2" type="checkbox" value="2" name=""></td>
        <td><input title="f6_Group2" type="checkbox" value="3" name=""></td>
        <td><input title="f6_Group2" type="checkbox" value="4" name=""></td>
        <td><input id="Group2"type="text" name="" size=10 ></td>
      </tr>
      <tr onclick="zxcSubTotal(this,'Group3','Total');">
        <td><input title="f6_Group3" type="checkbox" value="1" name=""></td>
        <td><input title="f6_Group3" type="checkbox" value="2" name=""></td>
        <td><input title="f6_Group3" type="checkbox" value="3" name=""></td>
        <td><input title="f6_Group3" type="checkbox" value="4" name=""></td>
        <td><input id="Group3"type="text" name="" size=10 ></td>
      </tr>
      <tr onclick="zxcSubTotal(this,'Group4','Total');">
        <td><input title="f6_Group4" type="checkbox" value="1" name=""></td>
        <td><input title="f6_Group4" type="checkbox" value="2" name=""></td>
        <td><input title="f6_Group4" type="checkbox" value="3" name=""></td>
        <td><input title="f6_Group4" type="checkbox" value="4" name=""></td>
        <td><input id="Group4"type="text" name="" size=10 ></td>
      </tr>
      <tr >
        <td colspan=5 ><input id="Total"type="text" name="" size=10 ></td>
      </tr>
    </table>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // Form Compendium f6 (15-04-2005)
    // One Check Box
    // by Vic Phillips [url]http://www.vicsJavaScripts.org.uk[/url]
    
    // Simulating the function of radio buttons with the appearance of a check box
    
    // Application Note
    
    // Insert an onload event call in the <body> tag
    // <body onload="f6_OneCheckBox()" >
    
    // Give each check box in a group a title attribute
    // with common name prefixed with 'f6_'
    // eg
    // <input title="f6_Group1" type="checkbox" name="ocbGroup1" checked="checked" ><br>
    // <input title="f6_Group1" type="checkbox" name="ocbGroup1" ><br>
    // <input title="f6_Group1" type="checkbox" name="ocbGroup1" ><br>
    // <input title="f6_Group1" type="checkbox" name="ocbGroup1" ><br>
    // <input title="f6_Group1" type="checkbox" name="ocbGroup1" ><br>
    
    // All variable, function etc. names are prefixed with 'f6_' to minimise conflicts with other javascripts
    
    // No Need to Change
    function f6_OneCheckBox(){
     f6_cbs=document.getElementsByTagName('INPUT');
     for (f6_0=0;f6_0<f6_cbs.length;f6_0++){
      if (f6_cbs[f6_0].title.substring(0,3)=='f6_'){
       f6_cbs[f6_0].onclick=function(){ f6_CheckOnlyOne(this); }
      }
     }
    }
    
    function f6_CheckOnlyOne(f6_){
     for (f6_0=0;f6_0<f6_cbs.length;f6_0++){
      if (f6_cbs[f6_0].title==f6_.title&&f6_cbs[f6_0]!=f6_){
       f6_cbs[f6_0].checked=false;
      }
     }
    }
    
    //-->
    </script>
    </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/

    Comment


    • #3
      Originally posted by [email protected]
      I want only 1 checkbox to be selected from amongst these at any given point of time.
      What about radio buttons?

      dumpfi
      "Failure is not an option. It comes bundled with the software."
      ....../)/)..(\__/).(\(\................../)_/)......
      .....(-.-).(='.'=).(-.-)................(o.O)...../<)
      ....(.).(.)("}_("}(.)(.)...............(.)_(.))¯/.
      ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
      Little did the bunnies suspect that one of them was a psychotic mass murderer with a 6 ft. axe.

      Comment


      • #4
        What about radio buttons?
        I have a script to give radio buttons the functionality of checkboxes
        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/

        Comment


        • #5
          If you use radio button (which is the right control to use), then you don't need to script checkboxes to act like radio buttons.
          Glenn
          vBulletin Mods That Rock!

          Comment


          • #6
            I
            f you use radio button (which is the right control to use), then you don't need to script checkboxes to act like radio buttons.
            Then Dont bother with JavaScript just stick to HTML


            [email protected] said CheckBoxes
            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/

            Comment


            • #7
              Originally posted by vwphillips
              I

              Then Dont bother with JavaScript just stick to HTML
              That's nearly my point. You don't need to script it to imitate the radio button's behavior. You will only script for the total, so the code will be shorter and the user won't be confused with the form as correct control is used. I will post later my radio button solution.

              Originally posted by vwphillips
              [email protected] said CheckBoxes
              dumpfi suggested the use of radio button which I agreed. Sometimes you need to inform people of the correct way of doing things rather than re-inventing the wheel.
              Glenn
              vBulletin Mods That Rock!

              Comment


              • #8
                This is getting tedious again.

                I have answered the original post which you could/will not do and if you dont like it tuff.
                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/

                Comment


                • #9
                  Code:
                  <html>
                  <head>
                  <script type="text/javascript">
                  var col1, col2, col3;
                  function setTotal(){
                    var oFrm = document.form1;
                    var i, ctr=1;
                    col1=col2=col3=0;
                    while (oRadGrp = oFrm.elements["row"+(ctr++)]){
                        for (i=0; i<oRadGrp.length; i++){
                           if (oRadGrp[i].checked && oRadGrp[i].value>0){
                              window["col"+oRadGrp[i].value]++;
                           }
                        }
                    }
                    oFrm.col1.value = col1;
                    oFrm.col2.value = col2;
                    oFrm.col3.value = col3;
                    oFrm.total.value = col1+col2+col3;
                  }
                  </script>
                  <head>
                  <body>
                  <form name="form1">
                  <input type="radio" name="row1" value="0" title="0" /> <input type="radio" name="row1" value="1" title="1" onclick="setTotal();" /> <input type="radio" name="row1" value="2" title="2" onclick="setTotal();" /> <input type="radio" name="row1" value="3" title="3" onclick="setTotal();" /><br />
                  <input type="radio" name="row2" value="0" title="0" /> <input type="radio" name="row2" value="1" title="1" onclick="setTotal();" /> <input type="radio" name="row2" value="2" title="2" onclick="setTotal();" /> <input type="radio" name="row2" value="3" title="3" onclick="setTotal();" /><br />
                  <input type="radio" name="row3" value="0" title="0" /> <input type="radio" name="row3" value="1" title="1" onclick="setTotal();" /> <input type="radio" name="row3" value="2" title="2" onclick="setTotal();" /> <input type="radio" name="row3" value="3" title="3" onclick="setTotal();" /><br />
                  <input type="radio" name="row4" value="0" title="0" /> <input type="radio" name="row4" value="1" title="1" onclick="setTotal();" /> <input type="radio" name="row4" value="2" title="2" onclick="setTotal();" /> <input type="radio" name="row4" value="3" title="3" onclick="setTotal();" /><br />
                  <input type="radio" name="row5" value="0" title="0" /> <input type="radio" name="row5" value="1" title="1" onclick="setTotal();" /> <input type="radio" name="row5" value="2" title="2" onclick="setTotal();" /> <input type="radio" name="row5" value="3" title="3" onclick="setTotal();" /><br />
                  <input type="text" name="col1" size="1" readonly="readonly" /><input type="text" name="col2" size="1" readonly="readonly" /><input type="text" name="col3" size="1" readonly="readonly" /><br />
                  <input type="text" name="total" size="11" readonly="readonly" />
                  </form>
                  </body>
                  </html>
                  Last edited by glenngv; Aug 5, 2005, 07:08 AM.
                  Glenn
                  vBulletin Mods That Rock!

                  Comment


                  • #10
                    Originally posted by vwphillips
                    This is getting tedious again.

                    I have answered the original post which you could/will not do and if you dont like it tuff.
                    I could do it of course, and in the right way. Why reinvent the wheel?
                    Glenn
                    vBulletin Mods That Rock!

                    Comment


                    • #11
                      your not paying attention again

                      he want checkboxes
                      Last edited by vwphillips; Aug 5, 2005, 08:32 AM.
                      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/

                      Comment


                      • #12
                        I very well know from the start that he wants checkboxes. But radio buttons are the right control for this in terms of functionality, user-friendliness and programmer-friendliness. It goes back to my question, "Why reinvent the wheel?". But if you or the poster doesn't want it, then it's fine. I just presented the proper way of doing it.
                        Glenn
                        vBulletin Mods That Rock!

                        Comment


                        • #13
                          I just presented the proper way of doing it.
                          NOT IF CHECKBOXES ARE REQUIRED
                          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/

                          Comment


                          • #14
                            It sure is the proper way regardless of the requirements.

                            http://www.useit.com/alertbox/20040927.html
                            http://builder.com.com/5102-6371-5418918.html

                            Again, if you or the poster doesn't want it and insist on using checkboxes to act as radio buttons, then it's fine with me.
                            Glenn
                            vBulletin Mods That Rock!

                            Comment


                            • #15
                              It sure is the proper way regardless of the requirements
                              Ignore the require!!!!!!! this is arrogance
                              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/

                              Comment

                              Working...
                              X