Radio Buttons As Arrays

In this tutorial we'll be learning how to Radio Buttons with JavaScript. You should be familiar with radio buttons from Advanced HTML Lesson #25. We'll be making this example where we access the checked button's VALUE with JavaScript.

The example determines which button is checked in each group and then displays the value in an alert box. We begin coding this example by making the two groups of radio buttons inside a <form>. I NAMEd the <form> "form1". Here's the code for the first group of "pet" buttons:

<h4>Favorite Pet</h4>

<input type="radio" name="pet" value="Dogs">Dogs<br>

<input type="radio" name="pet" value="Cats">Cats<br>

<input type="radio" name="pet" value="Birds">Birds<br>

<input type="radio" name="pet" value="Fish">Fish<br>

There are two important things to notice here. First, all of the radio buttons have the same NAME attribute -- "pet". This causes them to function as a group so that only one button can be selected at a time. It also sets the buttons up as a JavaScript array named "pet". The below would refer to the "Birds" button.

document.form1.pet[2]

The array is numbered beginning with zero. The assignment continues in the order in which the <input>s are coded. First coded is 0, next one is 1, etc.

The second thing to note is the use of a VALUE attribute. The VALUEs are all different. This is the data we can access with JavaScript. You cannot readily access the text labels of the radio buttons. We'll be dealing with the VALUE attribute's data.

document.form1.pet[0].value

The above would return a value of "Dogs". The "vegetable" radio button group is coded similarly. All of the "vegetable" buttons have the same name, so they'll work together as an array, but they all have different VALUEs coded into their <input> tags.

The whole goal here is to cycle through the array of radio buttons, find the checked one, and assign its VALUE to a variable for later use.

The Loop

To find out which radio button is checked in each group, we use a FOR loop to cycle through each array of buttons, and an IF statement to test to see which button is checked. Begin by coding the submit button and making a function in the <form>'s ACTION attribute.

<form name="form1" action="javascript:process()">

Now we'll start coding the "process()" function beginning with the loop we'll use to cycle through the array of "pet" buttons. Like other arrays, an array of radio buttons begins its numbering at 0, so that's what we'll initialize our loop's counter variable (i) to. We also want to increment the counter, or count off, by 1:

<script language="JavaScript">

function process(){

for (i = 0;[run condition];i++){
The code to be looped will go here later.
}
}

We want our loop to begin counting at 0, and count by 1 until we've cycled through the array of radio buttons. There are 4 buttons in our group. The last one is number 3, so we want our loop to run from 0-3. I'll use "i < 4" as our run condition:

<script language="JavaScript">

function process(){

for (i = 0; i < 4; i++){
The code to be looped will go here later.
}
}

You could also use the button array's "length" property. That's right. The radio button array has a "length" property just like any other array. It's referred to as:

document.form1.pet.length

The important thing to notice is that you must begin your reference with the "document" object. You can't use just "pet.length" as with other arrays. You must begin the reference at the "document" level. This is because it is a native <form> array and was not made with the "new Array()" constructor. Otherwise, it's the same as any other array length. The count begins at 1.

Now we've got a loop that will cycle through one of our four-element radio button arrays. Lets find out which button is checked.

The IF & "Checked"

Inside our FOR loop for each radio button array, we'll need to code an IF statement that tests to see if a particular button is checked or unchecked. With radio buttons, only one button can be checked per group (array). We're looking for the checked button.

<script language="JavaScript">

function process(){

for (i = 0; i < 4; i++){
if (document.form1.pet[i].checked == true){
What you'll do with the checked button. }
}
}

The syntax in red is very important and usually confusing. Each button in the array has a "checked" property. If the button is checked, this property returns the Boolean true. If not, it returns Boolean false.

The FOR loop cycles through each radio button and the IF statement tests to see if that button's "checked" property is true. A lot of people make the following mistake:

if (document.form1.pet[1] == checked)

The above won't work. "Checked" is not a value, it is a property. The values involved are Boolean true and false. Keep this common mistake in mind.

Oh, by the way, you can pre-set a button to be checked by default by using the following:

document.form1.pet[0].checked = true;

The above would check the "Dogs" button in our example. Remember to use one equals sign (=) when assigning values and two equals signs (==) when testing a value with IF.

You do not assign a checked value using "document.form1.pet[0] = checked". Remember that "checked" is a property and not a value. Remember the Booleans.

Also remember that you can only check one button at a time when dealing with radio buttons. If you code more than one button in the same group to be checked by default, only the last one with the default coding will be checked.

Making The String

We can find which radio button is checked. Now lets snag that value so we can use it. This uses a "value" property much like textboxes.

<script language="JavaScript">

function process(){

var favpet = "";

for (i = 0; i < 4; i++){
if (document.form1.pet[i].checked == true){
favpet = document.form1.pet[i].value; }
}
}

To make the string for displaying in the alert() box, I first declared a "favpet" variable at the beginning of the function. I set this to a null (empty) string using empty double quotes.

Further down I've assigned the value of the checked button to the variable "favpet". Now I can use "favpet" to display any selection in an alert() box or otherwise.

In our case, as with most radio button cases, only a single value will be passed to our variable. Our "var" can be declared (initialized before use) either inside (locally) or outside (globally) the actual function. It could even be declared right in the IF statement. Also remember that the "value" is what you've assigned to the VALUE attribute in the button's <input> tag. It is not the text label for the button.

The vegetable value is found the same way. The "vegetable" buttons are all named "veg", so the array name would also be "veg" -- document.form1.veg[0].value. I also assigned the value to a "favveg" variable that's declared right after the "favpet" one.

The Display & Error Control

Now we have the values we want stored in "favpet" and "favveg" variables. Displaying these in an alert() box is a piece of cake:

alert ("You like " + favpet + " and " + favveg + "!");

Summary & Exercises

When you make a group of radio buttons by giving them the same NAME, you also make them a JavaScript array. The first <input> coded is numbered 0, the next is 1, etc. The array's name is the same as the buttons' common NAME. You can access these buttons using "document.form_name.buttons_name[array_number]".

There are two stages in discovering which button is checked. First, you must cycle through the buttons. Secondly, you must test to see if which button is checked. Use a FOR loop to cycle through the buttons array just like any other array.

The running condition in your FOR loop can use the radio button array's "length" property. This is just like any other array's "length" property, but it must be referenced from the "document" object, instead of it's array name alone. Use "document.form1.pet.length", not "pet.length".

Use an IF statement in your FOR loop to determine which button is checked. The test for a checked button is "document.form_name.button_array_name[loop_counter].checked == true". Note that this is a Boolean true and does not have quotes around it. It is not a string. It is a Boolean value.

It's easiest to use a separate FOR loop and IF test for each group of radio buttons in a form.

Here's a step-by-step guide for finding checked radio button values with JavaScript:

1) Make the buttons using the same NAME attribute and appropriate VALUEs.

2) Make a FOR loop that will cycle through all of the buttons. Remember that the numbering starts at 0. The last element's number will always be 1 less than the button array's "length" property.

3) Put an IF statement inside the FOR loop that will test to see if a given button is "checked == true" or not. Remember to use the FOR loop's counter for the array number -- "document.form.button_array[counter].checked".

4) Assign a variable to the checked button's "value" property. This is done inside the IF statement. Now you can use that variable to display or analyze the selection made.

Try making this example. It uses the same looping and testing technique, but it has no submit button. It uses an "onClick" event in each <input> tag to call the main function. Make sure to view the example's code.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index