Categories:

JavaScript Kit > JavaScript Reference > Here

Radio Object

Last updated: June 20th, 2004

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

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>


Reference List

Partners
Right column

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.