Radio 对象代表 HTML 表单中的单选按钮。在 HTML 表单中 <input type="radio"> 每出现一次,一个 Radio 对象就会被创建。
单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。当单选按钮被选中或不选中时,该按钮就会触发 onclick 事件句柄。您可通过遍历表单的 elements[] 数组来访问 Radio 对象,或者通过使用 document.getElementById()。由www.169it.com搜集整理
一、单选按钮控件语法
1
|
<
input
name
=
"Fruit"
type
=
"radio"
value
=
""
/>
|
使用html input标签,name为自定义,type类型为“radio”的表单.
二、radio单选按钮代码举例
1、html代码片段:
1
2
3
4
5
6
7
8
|
<
form
action
=
""
method
=
"get"
>
您最喜欢水果?<
br
/><
br
/>
<
label
><
input
name
=
"Fruit"
type
=
"radio"
value
=
""
/>苹果 </
label
>
<
label
><
input
name
=
"Fruit"
type
=
"radio"
value
=
""
/>桃子 </
label
>
<
label
><
input
name
=
"Fruit"
type
=
"radio"
value
=
""
/>香蕉 </
label
>
<
label
><
input
name
=
"Fruit"
type
=
"radio"
value
=
""
/>梨 </
label
>
<
label
><
input
name
=
"Fruit"
type
=
"radio"
value
=
""
/>其它 </
label
>
</
form
>
|
2.举例代码片段二(默认选中设置举例):
1
2
3
|
<
input
type
=
"radio"
name
=
"identity"
value
=
"学生"
checked
=
"checked"
/>学生
<
input
type
=
"radio"
name
=
"identity"
value
=
"教师"
/>教师
<
input
type
=
"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
>
<
meta
http-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
>
<
input
type
=
"radio"
id
=
"test11"
name
=
"test11"
value
=
"1"
/>测试1
<
input
type
=
"radio"
id
=
"test11"
name
=
"test11"
value
=
"2"
/>测试2
<
input
type
=
"button"
value
=
"BTN_ByID"
onclick
=
"getVById()"
/>
<
input
type
=
"button"
value
=
"BTN_ByName"
onclick
=
"getVByName()"
/>
</
body
>
<
html
>
|