首页 > 代码库 > html中<radio>单选按钮控件标签用法解析及如何设置默认选中
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="http://www.mamicode.com/学生" checked="checked" />学生 <input type="radio" name="identity" value="http://www.mamicode.com/教师" />教师 <input type="radio" name="identity" value="http://www.mamicode.com/管理员" />管理员 |
在代码举例二种, 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="http://www.mamicode.com/1" />测试1 <input type="radio" id="test11" name="test11" value="http://www.mamicode.com/2" />测试2 <input type="button" value="http://www.mamicode.com/BTN_ByID" onclick="getVById()" /> <input type="button" value="http://www.mamicode.com/BTN_ByName" onclick="getVByName()" /> </body> <html> |
- 文章来源:html中<radio>单选按钮控件标签用法解析及如何设置默认选中
html中<radio>单选按钮控件标签用法解析及如何设置默认选中