.JavaScript&more Tutorial
 
Radio and Check Boxes

 
  • Manipulating radio and check boxes in JavaScript
  • How to access a radio/check box in JavaScript
  • Changing the state of a box
  • Grouping multiple boxes together
  • Techniques for determining which box is selected in a group
  • EXAMPLE

  • Go to JavaScript Start Page


    • Manipulating radio and check boxes in JavaScript
                   Radio and check boxes are an integral part of forms that allow a surfer to make a selection with a simple click of the mouse. These form controls are not nearly as commonly manipulated in JavaScript when compared to <textarea> elements, mainly because a lot of developers aren't aware that radio and check boxes can to be dynamically accessed and their values changed using JavaScript. Before we officially jump in, its important to first make sure that everyone's clear on the distinction between a radio and a check box. Only one radio box in a group can be selected at a time, whereas with check boxes, multiple selections are allowed. 

    • How to access a radio/check box in JavaScript
    How exactly does one access a radio or checkbox in JavaScript? 
             - through form element's name
    Whether it is a radio or a check box makes no difference to JavaScript. 
    The below defines a radio button with the name "test_radio", and uses JavaScript to access it:

                   <form name="name_form">
                          <input type="radio" name="test_radio">
                      </form>
                   <script>
                      //accesses the button called "test_radio"
                        document.name_form.test_radio
                      </script>


    • Changing the state of a box 
    Accessing a box (radio or check) by itself is useless if we can't go on to manipulate the state of it. The state of a box can be of two things- "on" when its selected, and "off", when its not. This state is represented in JavaScript by a boolean property called "checked".

    Using this property, we can not only determine the state of a box, but change it as well, by assigning either a value of "true" or "false" to it.

    //alerts whether a box is checked 
    alert(document.name_form.test_radio.checked)

    //dynamically selects a box
    document.name_form.test_radio.checked=true


    • Grouping multiple boxes together


    Now that we know how to access and manipulate a single box, lets expand our workarea to cover an entire group of boxes. We rarely see only one radio or checkbox by itself in a form. The nature of them requires that they exist as a group. By now, we know that the default way to access any one box is through its name. Having said that, imagine having a group of 50 radio buttons. Accessing them would require us to give each and every button an unique name. Furthermore, in a scenery where we need to apply a loop through all of the radio buttons, it will mean manually writing out 50 lines of code to access and reach every of the 50 buttons. Hardly even an acceptable thought! There is a technique that will allow us to easily and efficiently access a radio or check box in a group. The key is to give each box the same exact name. By doing so, JavaScript creates an array out of the boxes with this same name, and allows us to access the individual boxes as an array element. Lets demonstrate this concept with a form that contains 10 check boxes:

    <form name="name_form">
                <input type="checkbox" name="mybox"><br>
                      <input type="checkbox" name="mybox"><br>
                      <input type="checkbox" name="mybox"><br>
                      <input type="checkbox" name="mybox"><br>
                      <input type="checkbox" name="mybox"><br>
                      <input type="checkbox" name="mybox"><br>
                     <input type="checkbox" name="mybox"><br>
                      <input type="checkbox" name="mybox"><br>
                      <input type="checkbox" name="mybox"><br>
                      <input type="checkbox" name="mybox"><br>
    </form>

    In the above form, we gave each box the same name. See just how easy it is now to access the individual check boxes:

    //accesses the 3rd checkbox
    document.name_form.mybox[2]

    //accesses the last checkbox
    document.name_form.mybox[9]

    //accesses each and every one of the boxes
    for (i=0; i<document.example.myboxes.length; i++)
    document.name_form.mybox[i]=//do whatever

    By giving each checkbox the same name, they turn into an array of checkboxes, and we all know the beauty of arrays in terms of power and versatility.


    • Techniques for determining which box is selected in a group


    In the final part of our tutorial, lets wrap things up by examining some techniques available in determining which box is selected in a group. There are, in general, two techniques that can be used to determine which box(s) are checked in a group. To start things off, lets first create a sample form that contains 5 radio boxes:

    <form name="name_form">
                NBC: <input type="radio" name="name_radio"><br>
                      CBS: <input type="radio" name=" name_radio"><br>
                      ABC: <input type="radio" name=" name_radio"><br>
                      CNN: <input type="radio" name=" name_radio"><br>
                      ESPN:<input type="radio" name=" name_radio"><br>
    </form>

    Perhaps you work for NBC, and would like to write a script that does one thing if NBC was selected, and another if not. Regardless of what you want the script to do, what you really want is for the script to able to determine which box was checked. Lets examine the two techniques that will help us achieve this.

    1) Use a for-loop to loop through the box array, and pick out the one that's selected
    This "brute force" technique calls for a loop to check the entire array of boxes, and simply pick out the one that's selected:

    //A variable that will hold the index number of the selected radio button
     var name_variable
     for (i=0;i<document.name_form.name_radio.length;i++)
    {
     if (document.name_form.name_radio[i].checked==true) name_variable=i
     }

    2) Use the onClick event handler inside the <input> tag to react to the selected box. Another method to determine which box is selected is to use the onClick event handler. Since <input> tags in general all react to onClick events, this is a simple way to determine the selection of a surfer:

    <script>
    var name_variable
    </script>
    <form name="name_form">
    NBC:   <input type="radio" name="name_radio" onClick="name_variable=0"><br>
    CBS:    <input type="radio" name="name_radio" onClick="name_variable=1"><br>
    ABC:    <input type="radio" name="name_radio" onClick="name_variable=2"><br>
    CNN:   <input type="radio" name="name_radio" onClick="name_variable=3"><br>
    ESPN:  <input type="radio" name="name_radio" onClick="name_variable=4"><br>
    </form>

    Whenever the user checks one of the radio boxes, variable "name_variable" is set to the index number of the box. 
    In the above two examples, we've shown how to determine the selection when only one box at a time can be selected. In the case where multiple selections are possible (such as with check boxes), using a for-loop should be preferred over the onClick event to "scan" the entire array and store in the index number of all selected boxes.


    •  EXAMPLE
    <HTML>
    <HEAD>
          <TITLE>radio_box</TITLE>
    </HEAD>
    <BODY>
         Please, choose the best your Enya songs?
    <FORM method="POST" name="name_form">
    <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 >
    <TR>
    <TD>1. The memory of trees </TD>
    <TD><INPUT type="radio" name="name_radio"></TD>
    </TR>
    <TR>
    <TD>2. Enywhere is </TD>
    <TD><INPUT type="radio" name="name_radio"></TD>
    </TR>
    <TR>
    <TD>3. China roses</TD>
    <TD><INPUT type="radio" name="name_radio"></TD>
    </TR>
    <TR>
    <TD>4. On my way home</TD>
    <TD><INPUT type="radio" name="name_radio"></TD>
    </TR>
    <TR>
    <TD>5. From where I am</TD>
    <TD><INPUT type="radio" name="name_radio"></TD>
    </TR>
    </TABLE>
    <script>
    function choose(i)
    {
    var name_variable
    for (i=0;i<document.name_form.name_radio.length;i++)
    {
    if (document.name_form.name_radio[i].checked==true)
    name_variable=i
    }
    alert("You have choosen  "+(name_variable+1)+"  song.")
    }
    </script>
    <BR>
    <input type="button" name="wait_for_check" value="Click here to see the result!" onclick="choose()">
    </FORM>
    </BODY>
    </HTML>


     

    To continue with Image Slide Show continue