Looping through Radio Buttons / The Checked Property

In order to find which radio button within a group has been checked, you must loop through the entire group.

Take a look at the HTML form. This form's name is "form" and contains a radio group named, "group1". The radio group contains 3 radios, each with a different value. We've also set the first radio button to be checked by default.

<form name="form">
<input type="radio" name="group1" value="mommy" checked>
<input type="radio" name="group1" value="toys">
<input type="radio" name="group1" value="monkeys">
</form>

In HTML, the key to creating a group of buttons is giving each button the same name. In JavaScript, creating a group of like objects, known as arrays, is possible using this same concept. Simply by giving the form elements the same name, they become part of an array, their index position depending upon the element's location in the HTML form's flow. So as far as JavaScript is concerned, the above radio buttons can be referenced like this:

document.form.group1[0] // 1st button in the group
document.form.group1[1] // 2nd button in the group
document.form.group1[2] // 3rd button in the group

We also have access to the individual buttons' properties:

document.form.group1[0].value // returns "mommy"
document.form.group1[1].value // returns "toys"
document.form.group1[2].value // returns "monkeys"

The Checked Property

Just as radio buttons (and checkboxes for that matter) have an HTML attribute of "checked", they also have a corresponding JavaScript property of checked. The checked property's value is boolean, meaning it has a value of either true or false, true if the button is checked and false if it is not checked.

document.form.group1[0].checked // returns true
document.form.group1[1].checked // returns false
document.form.group1[2].checked // returns false

So to find which radio in the group is checked, we'll need to loop through the radio group array, checking each button's checked property for a true value.

The script first declares a variable that will hold the value of the checked button. Then it loops through the radio group, using an if statement within the for loop's body that checks each button's checked property for a value of true. NOTE: since the checked property's value is boolean, the if statement could also be constructed like this: if(document.form.group1[i].checked==true). If and when a button is found to have a checked value of true, the variable, "found_it" is set equal to the checked button's value.

var found_it

for (var i=0; i<document.form.group1.length; i++) {
if (document.form.group1[i].checked) {

found_it = document.form.group1[i].value

}
}

Once the group has been looped through and a value has been set for the variable, you can do anything you'd like with that value including writing it to the page or sending it to a CGI script on the server.

Although there are different and more complex ways of looping through radio buttons, it doesn't have to be difficult.

View the Source