Solved

Cycle through checkboxes on a form and determine if at least one has been checked

Posted on 2004-10-25
631 Views
Last Modified: 2012-06-27
I have a form with 3 checkboxes.  I need the button to be disabled until the user clicks one of the boxes, at which point it will become enabled.  If the user clicks a checkbox, and then clicks again (un-checking it), i need to cycle through all the checkbxes to see whether or not one is still checked in order to set the correct state of the buttons.  What I cant figure out is the javacript syntax to check the value of all the checkboxes in a form after an onClick event, or something similar?

<form name="form1">

<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3

<input type="button" disabled value="Go">
</form>
0
Question by:soBC
    4 Comments
     
    LVL 12

    Expert Comment

    by:minichicken
    <script language = "javascript">
    function chkbutton()
    {
          if (form1.chk1.checked == true || form1.chk2.checked == true || form1.chk3.checked == true)
          {
                form1.thebutton.disabled = false;            
          }
          else
          {
                form1.thebutton.disabled = true;
          }
    }
    </script>
    <form name="form1">

    <input name ="chk1" type="checkbox" value="1" onclick ="chkbutton();">1
    <input name ="chk2" type="checkbox" value="2" onclick ="chkbutton();">2
    <input name ="chk3" type="checkbox" value="3" onclick ="chkbutton();">3

    <input name ="thebutton" type="button" disabled value="Go">
    </form>
    0
     

    Author Comment

    by:soBC
    Ah...i have one more condition actually.  The number of checkboxes may not always be 3.  I need to account for that variation.  Thanks for the sample though.  It'll work fine statically, but Im not sure how I'd modify it to handle dynamically generated lists of checkboxes...
    0
     
    LVL 3

    Accepted Solution

    by:
    Loop through all form elements but add this

    if (form1[i].type == "checkbox")

    and then only work with those that evaluate as true.  So it would look something like this (code is untested):

    <script language="JavaScript" type="text/javascript">
    function uncheck(form) {
    var i;
    var formElements = form.elements;

    for (i=0; i<formElements.length; i++) {  //loop through form elements
         if (formElements[i].type == "checkbox") {  //test for only checkbox items
              if (formElements[i].checked) {  //test if element is checked
                   form1.thebutton.disabled = true;  //uncheck
              }
         }
    }
    }
    </script>
    0
     
    LVL 12

    Expert Comment

    by:minichicken
    <script language = "javascript">
    function chkbutton()
    {
          document.form1.thebutton.disabled = true;
          
          for(var i=0; i< document.form1.elements['chk[]'].length;i++)
          {
                if(document.form1.elements['chk[]'][i].checked)
                {
                      document.form1.thebutton.disabled = false;
                }
          }
    }



    </script>
    <form name="form1">

    <input name ="chk[]" type="checkbox" value="1" onclick ="chkbutton();">1
    <input name ="chk[]" type="checkbox" value="2" onclick ="chkbutton();">2
    <input name ="chk[]" type="checkbox" value="3" onclick ="chkbutton();">3

    <input name ="thebutton" type="button" disabled value="Go">
    </form>
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Are you into PHP development and curious how you can make your life easier when publishing your website? Do you sometimes worry you might forget to remove debug lines? Or you spend unnecessary time to double check you haven't accidentally uploaded '…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
    This video teaches users how to migrate an existing Wordpress website to a new domain.

    884 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now