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