html中<radio>单选按钮控件标签用法解析及如何设置默认选中Radio 对象代表 HTML 表单中的单选按钮。在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。由www.169it.com搜集整理
一、单选按钮控件语法
1
<inputname="Fruit"type="radio"value=""/>
使用html input标签，name为自定义，type类型为“radio”的表单.
二、radio单选按钮代码举例
1、html代码片段：
1
2
3
4
5
6
7
8
<formaction=""method="get">
您最喜欢水果？<br/><br/>
<label><inputname="Fruit"type="radio"value=""/>苹果 </label>
<label><inputname="Fruit"type="radio"value=""/>桃子 </label>
<label><inputname="Fruit"type="radio"value=""/>香蕉 </label>
<label><inputname="Fruit"type="radio"value=""/>梨 </label>
<label><inputname="Fruit"type="radio"value=""/>其它 </label>
</form>
2.举例代码片段二(默认选中设置举例):
1
2
3
<inputtype="radio"name="identity"value="学生"checked="checked"/>学生
<inputtype="radio"name="identity"value="教师"/>教师
<inputtype="radio"name="identity"value="管理员"/>管理员
在代码举例二种， checked="checked" 表示默认选中项设置。
3.代码举例三(js操作radio):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gbk">
<script>
<!--
//选中2返回的也是1，找到第一个ID为该值的DOM，弹出 1
function getVById(){alert(document.getElementById('test11').value);}
function getVByName(){
var tt = document.getElementsByName('test11');
for (var iIndex = 0; iIndex < tt.length ; iIndex++ )
{
if(tt[iIndex].checked)
{
alert(tt[iIndex].value);
break;
}
}
};
-->
</script>
<title>http://www.169it.com</title>
</head>
<body>
<inputtype="radio"id="test11"name="test11"value="1"/>测试1
<inputtype="radio"id="test11"name="test11"value="2"/>测试2
<inputtype="button"value="BTN_ByID"onclick="getVById()"/>
<inputtype="button"value="BTN_ByName"onclick="getVByName()"/>
</body>
<html>
文章来源:html中<radio>单选按钮控件标签用法解析及如何设置默认选中