dynamic checkboxes

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • wissenwill
    New Member
    • Nov 2006
    • 1
    #1

    dynamic checkboxes

    Hello!

    I need help to modify the following JavaScript:

    [HTML]<script language="javas cript">

    var flds = "chk1,chk2,chk3 ,chk4".split(", ")
    var vals = new Array(2,4,8,16)
    var msgs = new Array();

    msgs[0] = 'None checked';

    msgs[2] = '1 checked';

    msgs[4] = '2 checked';
    msgs[6] = '2 & 1 checked';

    msgs[8] = '3 checked';
    msgs[10] = '3 & 1 checked';
    msgs[12] = '3 & 2 checked';
    msgs[14] = '3 & 2 & 1 checked';

    msgs[16] = '4 checked';
    msgs[18] = '4 & 1 checked';
    msgs[20] = '4 & 2 checked';
    msgs[22] = '4 & 2 & 1 checked';
    msgs[24] = '4 & 3 checked';
    msgs[26] = '4 & 3 & 1 checked';
    msgs[28] = '4 & 3 & 2 checked';
    msgs[30] = '4 & 3 & 2 & 1 checked';

    function chkBoxProc (fld) {
    var val = 0;

    for (i=0;i<flds.len gth;i++) {
    val += (fld.form.eleme nts[flds[i]].checked)?vals[i]:0;
    }
    document.getEle mentById ('msg').innerHT ML = msgs[val];

    }
    </script>
    <form>
    <input type="checkbox" name="chk1" onClick="chkBox Proc(this)">1<b r />
    <input type="checkbox" name="chk2" onClick="chkBox Proc(this)">2<b r />
    <input type="checkbox" name="chk3" onClick="chkBox Proc(this)">3<b r />
    <input type="checkbox" name="chk4" onClick="chkBox Proc(this)">4<b r />

    <span id="msg">None checked</span>

    </form>[/HTML]

    In the end I have about 10 checkboxes, which I want to display by this method. When I wrote this script in the way as you can see above it would take me at least 3 weeks.

    Who can help me out to make the script more dynamic?

    Finally I would replace the array values with some html-code which contains more form elements (checkboxes...) - is that possible too?

    Thank you!
    -w
    Tags: None
    • sheenattt
      New Member
      • Nov 2006
      • 20
      #2
      Honestly speaking you didnt explained your problem specifically,I didnt understand what ur problem is,but as far as I understood am sending this code.Hope it will help u.

      <html>
      <title>CodeAve. com(Checkbox Input Validation)</title>
      <body bgcolor="#FFFFF F">

      <script Language="JavaS cript">
      <!--
      function checkbox_checke r()
      {

      // set var checkbox_choice s to zero

      var checkbox_choice s = 0;

      // Loop from zero to the one minus the number of checkbox button selections
      for (counter = 0; counter < checkbox_form.c heckbox.length; counter++)
      {

      // If a checkbox has been selected it will return true
      // (If not it will return false)
      if (checkbox_form. checkbox[counter].checked)
      { checkbox_choice s = checkbox_choice s + 1; }

      }


      if (checkbox_choic es > 3 )
      {
      // If there were more than three selections made display an alert box
      msg="You're limited to only three selections.\n"
      msg=msg + "You have made " + checkbox_choice s + " selections.\n"
      msg=msg + "Please remove " + (checkbox_choic es-3) + " selection(s)."
      alert(msg)
      return (false);
      }


      if (checkbox_choic es < 3 )
      {
      // If there were less then selections made display an alert box
      alert("Please make three selections. \n" + checkbox_choice s + " entered so far.")
      return (false);
      }

      // If three were selected then display an alert box stating input was OK
      alert(" *** Valid input of three outfielders was entered. ***");
      return (true);
      }

      -->
      </script>


      <form method="get" action="#"
      onsubmit="retur n checkbox_checke r()" name="checkbox_ form">
      <input type="checkbox" value="A" name="checkbox" >A<br>
      <input type="checkbox" value="B" name="checkbox" >B<br>
      <input type="checkbox" value="C" name="checkbox" >C<br>
      <input type="checkbox" value="D" name="checkbox" >D<br>
      <input type="checkbox" value="E" name="checkbox" >E<br>
      <input type="checkbox" value="F" name="checkbox" >F<br>
      <input type="checkbox" value="G" name="checkbox" >G<br>
      <input type="checkbox" value="H" name="checkbox" >H<br>
      <input type="checkbox" value="I" name="checkbox" >I<br>
      <input type="checkbox" value="J" name="checkbox" >J<br>
      <input type="checkbox" value="K" name="checkbox" >K<br>
      <input type="checkbox" value="L" name="checkbox" >L<br>
      <input type="checkbox" value="M" name="checkbox" >M<br>
      <input type="checkbox" value="N" name="checkbox" >N<br>
      <input type="checkbox" value="O" name="checkbox" >O<br>
      <input type="submit" value="Submit">
      </form>

      </body>
      </html>

        Comment

        Previous template Next
        Working...