js实现表单Radio切换效果的方法


Posted in Javascript onAugust 17, 2015

本文实例讲述了js实现表单Radio切换效果的方法。分享给大家供大家参考。具体如下:

这里基于js实现表单中的Radio单选框切换效果,当选中某个单选框的时候,所属范围会一同变换,我觉得大家应该收藏一下,以前想用的时候苦苦叫不上这种效果的名字,现在找到了,而且实现起来竟然如此简单,有些地方要注意,获取标签名为myradio的标签。

运行效果截图如下:

js实现表单Radio切换效果的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Radio切换效果</title>
<style>
*{margin:0;padding:0;}
body{margin:50px;font-size:12px;color:#666;}
li{list-style:none;}
div{width:210px;}
#tab1 ,#tab2{width:398px;height:34px;border:1px #cfedff solid;border-bottom:0;background:url(images/title.gif) repeat-x;}
#tab1 ul ,#tab2 ul{margin:0;padding:0;}
#tab1 li,#tab2 li{float:left;padding:0 30px;height:34px;line-height:34px;text-align:center;border-right:1px #ebf7ff solid;cursor:pointer;}
#tab1 li.now,#tab2 li.now{color:#5299c4;background:#fff;font-weight:bold;}
.tablist{width:378px;height:100px;padding:10px;font-size:14px;line-height:24px;border:1px #cfedff solid;border-top:0;display:none;}
.block{display:block;}
</style>
</head>
<body>
<h1>Radio切换</h1>
<style type="text/css">
 fieldset{width:378px;border:1px #B0C0D1 solid;padding:10px;}
 legend{background:#B0C0D1;padding:4px 10px;color:#fff;}
 #c{margin-top:10px;}
 .c1,.c2{width:378px;line-height:20px;}
 .c1{color:#014CC9;}
 .c2{color:#7E6095;}
 h3{font-size:16px;padding:5px 0;}
 .red{color:#BD0A01;}
</style>
<script type="text/javascript">
function radioShow(){
 var myradio=document.getElementsByName("myradio");
 var div=document.getElementById("c").getElementsByTagName("div");
 for(i=0;i<div.length;i++){
  if(myradio[i].checked){
   div[i].style.display="block";
   }
   else{
   div[i].style.display="none";
   }
  }
 }
</script>
<form name="ck">
<fieldset>
 <legend>I'm Radio</legend>
  <h3>请选择:</h3>
  <label for="r1" class="red"><input name="myradio" id="r1" type="radio" value="" checked="checked" onclick="radioShow();" />XML教程</label>
  <label for="r2" class="red"><input name="myradio" id="r2" type="radio" value="" onclick="radioShow();" />浏览器脚本</label>
<div id="c">
 <div class="c1">
 <label for="xml"><input name="c2" type="checkbox" id="xml" value="" />XML</label>
  <label for="dtd"><input name="c2" id="dtd" type="checkbox" value="" />DTD</label>
  <label for="xmldom"><input name="c2" id="xmldom" type="checkbox" value="" />XML DOM</label>
  <label for="xsl"><input name="c2" id="xsl" type="checkbox" value="" />XSL</label>
  <label for="xslt"><input name="c2" id="xslt" type="checkbox" value="" />XSLT</label>
  <label for="xslfo"><input name="c2" id="xslfo" type="checkbox" value="" />XSL-FO</label>
  <label for="xpath"><input name="c2" id="xpath" type="checkbox" value="" />XPath</label>
  <label for="xquery"><input name="c2" id="xquery" type="checkbox" value="" />XQuery</label>
  <label for="xlink"><input name="c2" id="xlink" type="checkbox" value="" />XLink </label>
  <label for="xpointer"><input name="c2" id="xpointer" type="checkbox" value="" />XPointer</label>
  <label for="schema"><input name="c2" id="schema" type="checkbox" value="" />Schema</label>
  <label for="xforms"><input name="c2" id="xforms" type="checkbox" value="" />XForms</label>
 </div>
 <div class="c2" style="display:none;">
 <label for="js"><input name="c3" id="js" type="checkbox" value="" />JavaScript</label>
  <label for="hd"><input name="c3" id="hd" type="checkbox" value="" />HTML DOM</label>
  <label for="dhtml"><input name="c3" id="dhtml" type="checkbox" value="" />DHTML</label>
  <label for="vbs"><input name="c3" id="vbs" type="checkbox" value="" />VBScript</label>
  <label for="ajax"><input name="c3" id="ajax" type="checkbox" value="" />AJAX</label>
  <label for="e4x"><input name="c3" id="e4x" type="checkbox" value="" />E4X</label>
  <label for="wml"><input name="c3" id="wml" type="checkbox" value="" />WMLScript</label>
 </div>
</div>
</fieldset>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 #Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 #Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 #Javascript
jquery实现动静态条形统计图
Aug 17 #Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 #Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 #Javascript
js简单实现Select互换数据的方法
Aug 17 #Javascript
You might like
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
Angular 数据请求的实现方法
2018/05/07 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Python模块学习 filecmp 文件比较
2012/08/27 Python
python比较两个列表大小的方法
2015/07/11 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
python线程池threadpool实现篇
2018/04/27 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
消防安全责任书
2014/04/14 职场文书
成立公司计划书
2014/05/07 职场文书
委托书的写法
2014/09/16 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis