input type=radio element | input type=radio object
[This documentation is preliminary and is subject to change.]
Creates a radio button control.
![]() |
Standards information
- HTML 4.01 Specification, Section 17.4
HTML information
| Closing Tag | forbidden |
|---|---|
| CSS Display | inline |
DOM Information
Inheritance Hierarchy
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
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
- 6/3/2008
- raphpell
- 6/9/2008
- John Sudds [Microsoft]
