Radio Object
CSGNetwork FREE Source Code, Javascript Source, and Code Snippets!
CSGNetwork Custom Search
     Bookmark and Share
Top Free Apps

Right click this window and select "view source" in order to copy the source for this script.

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



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" />

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

Bookmark and Share
Registered® Trademark™ and Copyright© 1973 - CSG, Computer Support Group, Inc. and CSGNetwork.Com All Rights Reserved