RadioButton object (Object/DOM)

A toggle button that acts together with a group of radio buttons in a family. Clicking one deselects any others in the group. These are used in forms to choose one item from a set.

Availability:

DOM level - 1
JavaScript - 1.0
JScript - 1.0
Internet Explorer - 3.02
Netscape - 2.0
Opera - 3.0
Inherits from:Input object
JavaScript syntax:-myRadioButton = myDocument.aFormName.anElementName
-myRadioButton = myDocument.aFormName.elements[anItemIndex]
IEmyRadioButton = myDocument.all.anElementID
IEmyRadioButton = myDocument.all.tags("INPUT")[anIndex]
IEmyRadioButton = myDocument.all[aName]
-myRadioButton = myDocument.forms[aFormIndex].anElementName
-myRadioButton = myDocument.forms[aFormIndex].elements[anItemIndex]
-myRadioButton = myDocument.getElementById(anElementID)
-myRadioButton = myDocument.getElementsByName(aName)[anIndex]
-myRadioButton = myDocument.getElementsByTagName("INPUT")[anIndex]
HTML syntax:<INPUT TYPE="radio">
Argument list:anIndexA valid reference to an item in the collection
aNameThe name attribute of an element
anElementIDThe ID attribute of an element
anItemIndexA valid reference to an item in the collection
aFormIndexA reference to a particular form in the forms collection
Object properties:checked, defaultChecked, status, type, value
Object methods:handleEvent()
Event handlers:onAfterUpdate, onBeforeUpdate, onBlur, onClick, onDblClick, onErrorUpdate, onFilterChange, onFocus, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onRowEnter, onRowExit

Many properties, methods, and event handlers are inherited from the Input object class. Refer to topics grouped with the "Input" prefix for details of common functionality across all sub-classes of the Input object super-class.

There isn't really a RadioButton object class but it is helpful when trying to understand the wide variety of input element types if we can reduce the complexity by discussing only the properties and methods of a radio button. In actual fact, the object is represented as an item of the Input object class.

The RadioButton sub-class of the Input object does not support the select() method or the defaultValue property except on MSIE.

Example code:

   <HTML>
   <HEAD>
   </HEAD>
   <BODY>
   <DIV ID="RESULT">?</DIV>
   <FORM onClick="handleClick()">
   <INPUT TYPE="radio" VALUE="A" NAME="SET">Selection A<BR>
   <INPUT TYPE="radio" VALUE="B" NAME="SET">Selection B<BR>
   <INPUT TYPE="radio" VALUE="C" NAME="SET">Selection C<BR>
   <INPUT TYPE="radio" VALUE="D" NAME="SET">Selection D<BR>
   </FORM>
   <SCRIPT>
   // Code for IE only
   function handleClick()
   {
      myString  = "[";
      myString += document.forms[0].elements[0].checked;
      myString += "] [";
      myString += document.forms[0].elements[1].checked;
      myString += "] [";
      myString += document.forms[0].elements[2].checked;
      myString += "] [";
      myString += document.forms[0].elements[3].checked;
      myString += "]";
      document.all.RESULT.innerText = myString;
   }
   </SCRIPT>
   </BODY>
   </HTML>

See also:Element object, Form.elements[], FormElement object, Input object, Input.accessKey, onClick, RadioButton.handleEvent()

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
checked1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/a-
defaultChecked1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/a-
status n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
type1.1 1.13.0 3.03.0 3.04.0 4.03.0 3.0 n/a n/a1 1 n/a n/aReadOnly.
value1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/aWarning

MethodJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
handleEvent()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/a-

Event nameJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
onAfterUpdate n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onBeforeUpdate n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onBlur1.1 1.13.0 3.03.0 3.04.0 4.03.0 3.0 n/a n/a n/a n/a n/aWarning
onClick1.0 1.01.0 1.02.0 2.03.0 3.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onDblClick1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onErrorUpdate n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onFilterChange n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onFocus1.0 1.03.0 3.02.0 2.04.0 4.03.0 3.0 n/a n/a n/a n/a n/aWarning
onHelp n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
onKeyDown1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onKeyPress1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onKeyUp1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseDown1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseMove1.2 1.23.0 3.04.0 4.04.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onMouseOut1.1 1.13.0 3.03.0 3.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseOver1.0 1.01.0 1.02.0 2.03.0 3.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseUp1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onRowEnter n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onRowExit n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-

Inheritance chain:

Element object, Input object, Node object