单选按钮点击相关文字选中
情景：在一个HTML的页面中设计一个表单，要求需要有单选框，并且通过点击单选框后面的相关文字既可以得到选中。
主要两种方法实现，方法1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>FIRST PAGE</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style>
h2{text-align:center}
</style>
</head>
<body>
<form action="">
<h2>选择</h2><hr>
您最喜欢水果？<br>
<input type ="radio" name = "fruit" value ="" checked>苹果<br>
<label><input type ="radio" name = "fruit" value ="">桃子</label><br>
<label><input type ="radio" name = "fruit" value ="">香蕉</label><br>
<label><input type ="radio" name = "fruit" value ="">梨</label><br>
<label><input type ="radio" name = "fruit" value ="">其他</label>
</form>
</body>
</html>
在上述的代码中
1.有“苹果”的一项没有标签<label>所以必须通过点击前面的单选按钮选择，后面的选项直接点击相关的文字即可。
2.因为在input标签中添加了“checked”,所以当页面加载完之后“苹果”选项是被选中的（即默认选中）。如果想要用JavaScript语句实现可以在改代码后面添加如下的语句：
<script>document.getElementsByName("fruit")[0].checked="checked";</script>//默认的选中第一个选项
方法2：
<label for="apple">苹果</label>
<input type = "radio" id = "apple" name = "fruit"><br>
<label for="peach">桃子</label>
<input type = "radio" id = "peach" name = "fruit"><br>
<label for="banana">香蕉</label>
<input type = "radio" id = "banana" name = "fruit"><br>
<label for="pear">梨</label>
<input type = "radio" id = "pear" name = "fruit"><br>
<label for="other">其他</label>
<input type = "radio" id = "pear" name = "fruit"><br>
在方法1的基础上实现。可见两者之间的简易程度不一。
参考：http://www.cnblogs.com/kingwell/archive/2012/09/28/2707132.html
http://www.divcss5.com/html/h490.shtml
时间： 2024-07-29 13:29:16