本文通过一个实例说明了js实现表单的单选效果的方法。分享给大家参考。具体如下：

这里，形式上的Radio收音盒切换效果是基于js实现的。当选择一个无线电盒时，它的范围将一起改变。我认为我们应该收集它。以前想用的时候，叫不出这个效果的名字。现在我们已经找到了，而且实现起来非常简单。我们应该注意一些地方，并获得名为myradio的标签。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-table-radio-cha-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titleRadio切换效果/title style * { margin 33600；划水：0;}正文{ margin :50 pxfont-size :12 px；color : # 666 } Li { list-style : none；} div { width:210px}#tab1，# tab 2 { width :398 pxh three :34 pxborder :1 px # cfedff固体；边框-底部：0;背景： URL(图片/标题。gif)重复-x；}#tab1 ul，# tab2 ul { margin:0划水：0;}#tab1 li，# tab 2 Li { float : leftadding :0 30px heart :34 px线高：34 px文本对齐：居中；右边框：1px #ebf7ff实心；光标：指针指针；}#tab1 li .现在，# tab 2 Li。现在{ color : # 5299 C4；背景# fffont-weight : bold；}.tablist { width:378px高度：100 pxpadd :10 px font-size :14 px；线高：24 pxborder:1px # cfedff固体；边框-top :0；display:none}。block { display : block }/style/head dy1h收音机切换/h1 style type=' text/CSS '字段集{ width :378 pxborder:1px #B0C0D1实心；padding:10px }图例{背景： # B0C 0 D1；padd :4 px 10pxcolor : # fff } # c { margin-top :10 px；} .c1，c2 {宽度：378px线高：20 px} . C1 { color : # 014 cc9 } . C2 { color : # 7e 6095 } H3 { font-size :16 px；padd :5 px 0；} .红色{ color: # BD0A01}/style脚本类型=' text/JavaScript '函数RadioHow(){ var my radio=document。GetElementsByname('我的收音机')；var div=文档。getelementbyid(' c ').getElementsByTagName(' div ')；for(I=0；idiv . lentigi){ if(my radio[I]).选中){ div[I]。风格。display=' block} else { div[I]。风格。display=无；} } }/脚本形式名称=' CK '字段集Legendi m Radio/传奇H3请选择：/h3标签为=' R1 ' class=' red '输入名称=' myradio ' id=' R1 ' type=' radio ' value=' checked=' checked ' onclick=' radio how()；/XML教程/label label for=' R2 ' class=' red ' input name=' myradio ' id=' R2 ' type=' radio ' value=' onclick=' radio how()；'/浏览器脚本/label div id=' c ' div class=' C1 ' label for=' XML '输入名称=' C2 ' type=' checkbox ' id=' XML '值=' '/XML/label for=' DTD '输入名称=' C2 ' id=' XML ldom '输入名称=' C2 ' id=' XML ldom ' type=' checkbox '值=' '/XML DOM/label for=' XSL '输入名称=' C2 ' id='标签标签为='js '输入名称='c3' id='js '类型='复选框'值=' '/JavaScript/标签为='hd '输入名称='c3' id='hd '类型='复选框'值=' '/HTML DOM/标签为='dhtml '输入名称='c3' id='dhtml '类型='复选框'值=' '/DHTML/标签为='vbs '输入名称='c3' id='vbs '类型='复选框'值='希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。