HTML怎样实现RadioButton单选按钮
发布时间：09/01 来源：未知 浏览：
关键词：
我们先来看input标签的格局
<input id="(id)" name="(组名称)" type="radio"></input>
注：关于需要选中检索的值，可以利用表单的提交或使用JavaScript猎取。
我们来看详细的示例
代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form name="form1" action="">
<input id="Radio1" name="RadioGroup1" type="radio" /><label for="Radio1">单选按钮 元素1</label><br/>
<input id="Radio2" name="RadioGroup1" type="radio" /><label for="Radio2">单选按钮 元素2</label><br />
<input id="Radio3" name="RadioGroup1" type="radio" /><label for="Radio3">单选按钮 元素3</label><br />
</form>
<div id="output"></div>
</body>
</html>运转结果
使用Web阅读器翻开上述HTML文件时，将显示如下所示的结果。
单击以更换单选按钮的选中状态
在多个组中使用RadioButton时
代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form name="form1" action="">
<div style="margin:16px;border:dotted 1px #202020;">
<input id="Radio1" name="group01" type="radio" /><label for="Radio1">单选项目1</label><br />
<input id="Radio2" name="group01" type="radio" /><label for="Radio2">单选项目2</label><br />
<input id="Radio3" name="group01" type="radio" /><label for="Radio3">单选项目3</label><br />
</div>
<div id="output1"></div>
<div style="margin:16px;border:dotted 1px #202020;">
<input id="Radio4" name="group02" type="radio" /><label for="Radio4">单选项目4</label><br />
<input id="Radio5" name="group02" type="radio" /><label for="Radio5">单选项目5</label><br />
<input id="Radio6" name="group02" type="radio" /><label for="Radio6">单选项目6</label><br />
</div>
<div id="output2"></div>
</form>
</body>
</html>说明：
要将单选按钮分成多个组，请将每个组的name属性设定为不一样名称。在上面的例子中，Radio 1，Radio 2，Radio 3的name属性是group 1。Radio 4，Radio 5，Radio 6的name属性是第2组。
运转结果
使用Web阅读器翻开上述HTML文件时，将显示如下所示的结果。
每组都是分开的，单选按钮的选中是独立的。
以上就是HTML怎样实现RadioButton单选按钮的具体内容，更多请关注百分百源码网其它相关文章！
