www.webdeveloper.com
Results 1 to 3 of 3

Thread: checkbox validation

  1. #1
    Join Date
    Mar 2003
    Posts
    2

    checkbox validation

    Im building a dating site in php and vould like to add some functionality with javascript. What I'm trying to achive here is when 'Any' checkbox is checked all the checkboxes in the 'p_hair[]' array should get checked and if you were to uncheck a checkbox in that array you would automatically uncheck 'Any'. Well here is my code and im gettign errors I dont know why (it has been couple of years since i last touched javascript to do forms)

    <html>
    <head>
    <title> checkbox validate </title>
    <script language="JavaScript">
    <!--
    // function accepts object and number of indexes in the array -1
    function uncheckBox(o,i){
    var objForm = document.forms[0];
    var objName = o.name;
    if(i == 0){
    objForm.objName[0].checked = false;
    } else {
    for(var n=1;n<=i;n++){
    objForm.objName[n].checked = true;
    }
    }
    }

    //-->
    </script>
    </head>

    <body>
    <form name="myForm">
    Select your preferences...<br><br>
    Hair<br>
    <input type="checkbox" name="p_hair" value="any" onClick="uncheckBox(this,5)" checked> Any<br>
    <input type="checkbox" name="p_hair" value="black" onClick="uncheckBox(this,0)"> Black<br>
    <input type="checkbox" name="p_hair" value="blonde" onClick="uncheckBox(this,0)"> Blonde<br>
    <input type="checkbox" name="p_hair" value="brown" onClick="uncheckBox(this,0)"> Brown<br>
    <input type="checkbox" name="p_hair" value="gray" onClick="uncheckBox(this,0)"> Gray<br>
    <input type="checkbox" name="p_hair" value="salt&peper" onClick="uncheckBox(this,0)"> Salt&Peper<br>

    <br>

    Eyes<br>
    <input type="checkbox" name="p_eyes" value="any" onClick="uncheckBox(this,3)" checked> Any<br>
    <input type="checkbox" name="p_eyes" value="blue" onClick="uncheckBox(this,0)"> Blue<br>
    <input type="checkbox" name="p_eyes" value="green" onClick="uncheckBox(this,0)"> Green<br>
    <input type="checkbox" name="p_eyes" value="brown" onClick="uncheckBox(this,0)"> Brown<br>

    </form>
    </body>
    </html>

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    Radio buttons would do that for you automatically.

    However, this function will do what you want:
    Code:
    function uncheckBox(o,i){ 
      for (var i=0; i<o.form[o.name].length; i++)
        {if (o.form[o.name][i].checked) o.form[o.name][i].checked = false;}
      o.checked = true;
    }

  3. #3
    Join Date
    Mar 2003
    Posts
    2

    thank you

    thanks to your insight i got my answer, your code is not exactly what I wanted but its nice to know you can use chekbox as a radio button What I initially wanted is to check as many as apply but do noct have 'Any' checkbox checked if not all checkboxes in the array were selected. Thanks again and here is a working version in case some one else is looking for it.

    <html>
    <head>
    <title> checkbox validate </title>
    <script language="JavaScript">
    <!--
    // function accepts object and number of indexes in the array -1
    function uncheckBox(o,i){
    var objForm = document.forms[0];
    var objName = o.name;
    if(i == 0){
    o.form[o.name][0].checked = false;
    } else {
    for(var n=1;n<=i;n++){
    o.form[o.name][n].checked = true;
    }
    }
    }
    //-->
    </script>
    </head>

    <body>
    <form name="myForm">
    Select your preferences...<br><br>
    Hair<br>
    <input type="checkbox" name="p_hair[]" value="any" onClick="uncheckBox(this,5)" checked> Any<br>
    <input type="checkbox" name="p_hair[]" value="black" onClick="uncheckBox(this,0)"> Black<br>
    <input type="checkbox" name="p_hair[]" value="blonde" onClick="uncheckBox(this,0)"> Blonde<br>
    <input type="checkbox" name="p_hair[]" value="brown" onClick="uncheckBox(this,0)"> Brown<br>
    <input type="checkbox" name="p_hair[]" value="gray" onClick="uncheckBox(this,0)"> Gray<br>
    <input type="checkbox" name="p_hair[]" value="salt&peper" onClick="uncheckBox(this,0)"> Salt&Peper<br>

    <br>

    Eyes<br>
    <input type="checkbox" name="p_eyes[]" value="any" onClick="uncheckBox(this,3)" checked> Any<br>
    <input type="checkbox" name="p_eyes[]" value="blue" onClick="uncheckBox(this,0)"> Blue<br>
    <input type="checkbox" name="p_eyes[]" value="green" onClick="uncheckBox(this,0)"> Green<br>
    <input type="checkbox" name="p_eyes[]" value="brown" onClick="uncheckBox(this,0)"> Brown<br>

    </form>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles