Javascript select all option

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • 159789
    New Member
    • Feb 2007
    • 1
    #1

    Javascript select all option

    Hi,
    I am new to javascript. I want to select all the checkboxes or deselect all in a form, based on the state of one checkbox. Here is the code:

    [HTML]<html>

    <script language="JavaS cript">
    function toggleChecked(o Element) {
    oForm = oElement.form;
    oElement = oForm.elements[oElement.name];
    alert("oElement :"+ oElement.length );
    if(oElement.len gth) {
    bChecked = oElement[0].checked;
    for(i = 1; i < oElement.length ; i++)
    oElement[i].checked = bChecked;
    }
    }
    </script>

    <form action="JavaScr ipt:" onsubmit="retur n false">
    <INPUT TYPE=CHECKBOX NAME="checkall" value="checkall " onClick="toggle Checked(this)"/>Check all<BR>
    <INPUT TYPE=CHECKBOX NAME="mushrooms " value="mushroom s">mushrooms<BR >
    <INPUT TYPE=CHECKBOX NAME="greenpepp ers" value="greenpep pers">green peppers<BR>
    <INPUT TYPE=CHECKBOX NAME="olives" value="olives"> olives<BR>
    <INPUT TYPE=CHECKBOX NAME="onions" value=""onions> onions<P>

    <INPUT TYPE=SUBMIT VALUE="submit">

    </form>
    </html>[/HTML]

    But I am getting the form value as null and no length inside the javascript.

    Please help. Thanks in advance.
    Last edited by acoder; Feb 27 '07, 10:04 AM. Reason: Code in tags
    Tags: None
    • dmjpro
      Top Contributor
      • Jan 2007
      • 2476
      #2
      look let's know a secret of js

      <input name = x>
      <input name = y>

      if u try to write ...
      x.length then it is undefined
      because in DOM there is only one element by name x

      just to solve ur problem try to give the same name to ur all checkboxes ...

      now try this code urself ....best of luck

      welcome in advance

        Comment

        • wgale025
          New Member
          • Feb 2007
          • 23
          #3
          [HTML]
          <script type="text/javascript">
          window.onload=f unction()
          {
          var chb=document.ge tElementsByTagN ame("input");
          for(var i=0;i<chb.lengt h;i++)
          {
          if(chb[i].type.toString( ).toLowerCase() =="checkbox")
          {
          chb[i].checked=true;
          }
          }
          }
          </script>
          [/HTML]

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Originally posted by wgale025
              [HTML]
              <script type="text/javascript">
              window.onload=f unction()
              {
              var chb=document.ge tElementsByTagN ame("input");
              for(var i=0;i<chb.lengt h;i++)
              {
              if(chb[i].type.toString( ).toLowerCase() =="checkbox")
              {
              chb[i].checked=true;
              }
              }
              }
              </script>
              [/HTML]
              This is fine, but if there are more than one set of checkboxes, it would not work as required.

                Comment

                • acoder
                  Recognized Expert MVP
                  • Nov 2006
                  • 16032
                  #5
                  Originally posted by 159789
                  Hi,
                  I am new to javascript. I want to select all the checkboxes or deselect all in a form, based on the state of one checkbox. Here is the code:

                  [HTML]<html>

                  <script language="JavaS cript">
                  function toggleChecked(o Element) {
                  oForm = oElement.form;
                  oElement = oForm.elements[oElement.name];
                  alert("oElement :"+ oElement.length );
                  if(oElement.len gth) {
                  bChecked = oElement[0].checked;
                  for(i = 1; i < oElement.length ; i++)
                  oElement[i].checked = bChecked;
                  }
                  }
                  </script>

                  <form action="JavaScr ipt:" onsubmit="retur n false">
                  <INPUT TYPE=CHECKBOX NAME="checkall" value="checkall " onClick="toggle Checked(this)"/>Check all<BR>
                  <INPUT TYPE=CHECKBOX NAME="mushrooms " value="mushroom s">mushrooms<BR >
                  <INPUT TYPE=CHECKBOX NAME="greenpepp ers" value="greenpep pers">green peppers<BR>
                  <INPUT TYPE=CHECKBOX NAME="olives" value="olives"> olives<BR>
                  <INPUT TYPE=CHECKBOX NAME="onions" value=""onions> onions<P>

                  <INPUT TYPE=SUBMIT VALUE="submit">

                  </form>
                  </html>[/HTML]

                  But I am getting the form value as null and no length inside the javascript.

                  Please help. Thanks in advance.
                  As dmjpro pointed out, you need to use the same name for each group of checkboxes.

                  You should define a name and id for your form. Also, pass the checkbox group to the function too. "this" is the particular checkbox that the onclick event takes place (the toggle checkbox).

                  Try something like the following after those changes:
                  Code:
                  function toggleChecked(checkboxGrp,oElement) {
 bChecked = oElement.checked;
 for(i = 0; i < checkboxGrp.length; i++)
 checkboxGrp[i].checked = bChecked;
}

                    Comment

                    Previous template Next
                    Working...