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
-
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.
<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>
|