JavaScript Kit > JavaScript Reference > Here

Radio Object

Radio buttons (<input type="radio">) within your form can be accessed and manipulated using JavaScript via the corresponding Radio object. There are two ways to access a radio button, depending on whether it it unique in the form (distinct name), or part of a group of radio buttons, all sharing the same name.

Distinct Name:

document.myform.radioname //where myform and radioname are names of your form/element.
document.myform.elements[i] //where i is the position of the radio button within form

Shared Names (part of a group of radio buttons):

document.myform.radioname[i] //where i is the position of the radio within the group of radio buttons.

Related Tutorials

• Manipulating radio and check boxes

Events

Events	Description
onBlur	Code is executed when the focus is removed from the radio button.
onClick	Code is executed when user clicks on the radio button.
onFocus	Code is executed when the focus is set on the radio button.

Properties

Properties	Description
checked	Boolean property that reflects the current state of the radio button, "true" if it's checked, and "false" if not. Example(s).
defaultChecked	Boolean property that reflects the value of the CHECKED attribute.
form	References the form that contains the radio button.
name	Reflects the name of the radio button (the name attribute).
type	A property available on all form elements, "type" returns the type of the calling form element, in this case, "radio".
value	A read/write string that specifies the value of the radio button (the value attribute).

Methods

Methods	Description
blur()	Removes focus away from the radio button.
click()	Simulates a user clicking on the radio button.
focus()	Sets focus on the radio button.

Examples

checked

This example loops through a group of radio buttons all sharing the same name, and returns the index number of the one that's checked:

<form name="test">
<input type="radio" name="myradio" />
<input type="radio" name="myradio" checked />
<input type="radio" name="myradio" />
</form>

<script type="text/javascript">
//a variable that will hold the index number of the selected radio button
for (i=0;i<document.test.myradio.length;i++){
if (document.test.myradio[i].checked==true)
theone=i
}
</script>

---