html中<radio>单选按钮控件标签用法解析及如何设置默认选中

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 >


转载于:https://my.oschina.net/u/1766067/blog/345522

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值