在某个网站注册时，我们会注意到“性别”字段有两个选项：“男”和“女”。如果不允许用户选择多个选项，可以使用表单元素的单选按钮对象。单选按钮对象用于一组互相排斥的值，也就是用户只能从选项列表中选择一项。单选按钮组中所有按钮共享同一个名称，所以浏览器知道将按钮组合在一起，通过选中其中一个按钮，其他按钮自动变为未选中状态。除此之外，每个按钮可以有自己独特的属性。
列出了与单选按钮对象关联的属性。
单选按钮对象的属性
名称 说明
checked通过布尔值设置或检索单选按钮是否被选中的状态
name设置或检索单选按钮的名称，该属性与整个单选按钮组相联系。
type指定控件的类型
value设置或检索选项按钮的值
length返回单选按钮组中的单选按钮的个数
列出了与单选按钮对象关联的事件处理程序。
与单选按钮对象关联的事件处理程序
表单元素事件处理程序说明
单选按钮onBlur单选按钮失去焦点时触发
onClick单选按钮被选定或取消选定时触发
onFocus单选按钮接收焦点时触发
在以下示例中，onClick事件将根据所单击的选项按钮在文本框中生成一条消息。
<HTML>
<HEAD>
<TITLE>使用Option button对象</TITLE>
<SCRIPT LANGUAGE=\JavaScript\>
<!--
function check()
{
gender=documentforms[0]gender;
answer=documentforms[0]answer;
txt=\\;
for(i=0;i<genderlength;i++)
{
if (genderchecked)
{
txt=txt+gendervalue+\\
}
}
answervalue=\您选择了\+txt;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<P>请指定您的性别<BR><BR>
<HR ALIGN=\left\ HRSHADE=\limegreen\ WIDTH=250px HEIGHT=50px></HR>
<INPUT TYPE=\radio\ NAME=\gender\ VALUE=\男\ onClick=\check()\>男
<INPUT TYPE=\radio\ NAME=\gender\ VALUE=\女\ onClick=\check()\>女
<HR ALIGN=\left\ HRSHADE=\limegreen\ WIDTH=250px HEIGHT=50px></HR>
<INPUT TYPE=\text\ NAME=\answer\ SIZE=\30\>
</FORM>
</BODY>
</HTML>
显示了执行以上HTML代码之后的输出结果。
<input type="radio" id="radioId" value="1" >
选中单选框JS代码：
var target = documentgetElementById("radioId");
targetchecked = true;
附完整代码：
<!DOCTYPE html>
<!--STATUS OK-->
<html>
<head>
<meta charset="utf-8">
<meta >很简单，两个页面文件来实现
第一个文件mainhtml
<form name="form1" method="post" action="tryasp">
<input type="radio" name="rb" value="1">
one
<input type="radio" name="rb" value="2">
two
<input type="radio" name="rb" value="3">
three
</form>
第二个文件 tryasp
<%
dim rb
rb=requestform("rb")
if rb="1" then responsewrite "选择了one"
if rb="2" then responsewrite "选择了two"
if rb="3" then responsewrite "选择了three"
%>
有几点需要注意
1 无论有多少个点选按钮，只要是属于一个点选问题的，那么他们的名称必须相同。
2 在下一个接受的页面中requestform的接受对象一定要和单选按钮的名称形同。
3 第一个文件后缀无所谓，但是第二个文件中使用了vbscript代码，所以后缀必须为asp
4 后面的判断方法有很多，但都是根据相同的名称，不同的值来确定选择中了那个单选按钮的。设置他们的name属性一个名字就可以了。 <input type="radio" name="aaa">男 <input type="radio" name="aaa">女<html>
<head>
<meta >不是的 lable本身没有任何特殊效果 不过，在lable元素内点击文本 就会触发此控件。
可以在这里看到详细的解释的。
><input type="radio" name="myLike" value="Like1" id="Like1"><label for="Like1"> 体育运动:NBA</label> 试试吧，这样可以的。呵呵。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）