34 out of 62 rated this helpful - Rate this topic

input type=radio element | input type=radio object

[This documentation is preliminary and is subject to change.]

Creates a radio button control.

HTML 4.01 Specification, Section 17.4

Standards information

HTML information

Closing Tagforbidden
CSS Displayinline

DOM Information

Inheritance Hierarchy

 Node
  Element
   HTMLElement
     input type=radio

Remarks

Use a radio button control to limit a user's selection to a single value within a set of values. To do this, you must link together each button in a set of radio buttons by assigning each button the same name.

When a user submits a form, a selected radio button generates a name/value pair in the form data only if the button has a value.

To select a radio button as the default button in a set, set the checked property of the button to true.

A user can select a radio button only if the button has a name. To clear a selected radio button, a user must select another button in the set.

Windows Internet Explorer 8 and later. In IE8 Standards mode, you can select an input type=radio button that does not have a name attribute specified. In addition, dynamically setting the name attribute on an input type=radio button correctly applies that button to the same named group. For more information, see Defining Document Compatibility.

Touching on the label associated with a radio button has the same effect as touching the radio button directly.

Examples

This example uses the <label> tag to include the text with the checkbox to increase the touch sensitive area of the checkbox.


<label><input id="red" type="checkbox" name="colors" value="red" />Text</label>

This example uses the INPUT type=radio element to create three radio buttons.


<INPUT type=radio name="radio" CHECKED>1-10 years old
<INPUT type=radio name="radio">11 years old
<INPUT type=radio name="radio">12-120 years old

This example uses script to detect which radio button the user selects.


<SCRIPT>
function detect()
{
    if (radio[0].checked)
        alert("You're between 1 and 10 years old.")
    else if (radio[1].checked)
        alert("You're 11 years old.")
    else
        alert("You're between 12 and 120 years old.")
}
</SCRIPT>

See also

input
Reference
input
Conceptual
Introduction to Forms

 

 

Build date: 3/8/2012

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
DHTML bug to fix

There's a bug when we try to create dynamicaly a radio button group, we cannot set attributes :

  • name
  • checked
  • ...

Code example :

<div id="eTest"></div>

<script type="text/javascript">
var nTest = 2 , i = 1
,f1 = function(){
var e = document.createElement ( "INPUT" )
f2 ( e , "type" , "radio" )
f2 ( e , "checked" , false )
f2 ( e , "name" , "myGroup" )
f2 ( e , "value" , i++ )
return e
}
,f2 = function( e , sAttr , mValue ){
switch ( nTest ){
case 0 : e.setAttribute( sAttr , mValue ) ; break
case 1 :var oAttr = e.getAttributeNode( sAttr ); oAttr.value = mValue ; break
case 2 : e [ sAttr ] = mValue ; break
}
}
eTest.appendChild ( f1())
eTest.appendChild ( f1())
eTest.appendChild ( f1())
</script>

[jsudds.MSFT] This is a known bug with dynamic radio buttons. You have to create the button with the name attribute intact. This bug has been fixed in Internet Explorer 8. The following workaround can be used for cross-browser scenarios (doesn't work in Opera).

try{
rdo = document.createElement('<input type="radio" name="fldID" />');
}catch(err){
rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','fldID');
}

Source: http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html