js实现动态改变radio状态的方法


Posted in Javascript onFebruary 28, 2018

h5的radio是自带选中状态改变的,但是如果自带的状态无法满足自己的需求时,就需要自己去实现。

代码如下:

h5部分代码

<p class="group">
 <label class="active">
  <input type="radio" name="parent_radio" value="1" id="new_data" onclick="change()"/>
  最新资料</label>
 <label>
  <input type="radio" name="parent_radio" value="0" id="my_data" onclick="change()"/>
  我的资料</label>
 <label>
  <input name="parent_radio" type="radio" id="screen_data" value="0" onclick="change()"/>
  分类浏览</label>
 <label>
  <input type="radio" name="parent_radio" value="0" id="history_data" onclick="change()"/>
  浏览历史</label>
</p>

CSS代码

<style>
 input[type="radio"] {
  /*取消自带按钮*/
  color:gray;
  display: none;
 }
 .group>label:hover{
  /*鼠标移到控件上做的改变*/
  background-color: cornflowerblue;
 }
 .group>label{
  /*未选中状态*/
  float: left;
  color: #4A4A4A;
  font-size: 16px;
  padding: 10px 11px;
 }
 .group>label.active{
  /*选中状态*/
  color: #316CEB;
  font-size: 16px;
  border-top: 2px solid #316CEB;
  padding: 10px 11px;
 }
</style>

JS方法代码

<script type = "text/javascript">
 function change()
 {
  var radio = document.getElementsByName("parent_radio");
  /*用ByName是为了取到所有的radio*/
  var radioLength = radio.length;
  for(var i = 0;i < radioLength;i++)
  {
   if(radio[i].checked)
   {
    radio[i].parentNode.setAttribute('class', 'active');
   }else {
    radio[i].parentNode.setAttribute('class', '');
   }
  }
 }
</script>

效果如下

js实现动态改变radio状态的方法

这里实现的是顶部boder的动态显示隐藏并且这里radio左侧默认的圆形按钮设为了隐藏。如果想要按钮不隐藏,需要作如下修改

<p class="group">
 <label class="active"><img src="images/delate_choose.png" name="image">
  <input type="radio" name="parent_radio" value="1" id="new_data" onclick="change()"/>
  最新资料</label>
 <label>
  <img src="images/delate_no_choose.png" name="image">
  <input type="radio" name="parent_radio" value="0" id="my_data" onclick="change()"/>
  我的资料</label>
 <label>
  <img src="images/delate_no_choose.png" name="image">
  <input name="parent_radio" type="radio" id="screen_data" value="0" onclick="change()"/>
  分类浏览</label>
 <label>
  <img src="images/delate_no_choose.png" name="image">
  <input type="radio" name="parent_radio" value="0" id="history_data" onclick="change()"/>
  浏览历史</label>
</p>

即在每一个raido类型的input前面加一个img(注意选中和未选中的区别),JS的change方法做以下修改

var radio = document.getElementsByName("parent_radio");
var img = document.getElementsByName("image");
/*用ByName是为了取到所有的radio*/
var radioLength = radio.length;
for(var i = 0;i < radioLength;i++)
{
 if(radio[i].checked)
 {
  img[i].src = "images/delate_choose.png";
  radio[i].parentNode.setAttribute('class', 'active');
 }else {
  img[i].src = "images/delate_no_choose.png";
  radio[i].parentNode.setAttribute('class', '');
 }
}

img的length肯定和radio的length一样,所以可以只取一个length。

效果如下:

js实现动态改变radio状态的方法

由于自己刚学的h5,很多东西不熟练,不敢说自己的方法就是正确方法,只是为了记录学习过程,所以把学到的一些东西写在这里,望大家不吝赐教。

这篇js实现动态改变radio状态的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 #Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
vue.js根据代码运行环境选择baseurl的方法
Feb 28 #Javascript
vue+element实现批量删除功能的示例
Feb 28 #Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 #Javascript
React 组件转 Vue 组件的命令写法
Feb 28 #Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 #Javascript
You might like
PHP 已经成熟
2006/12/04 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
php验证码生成器
2017/05/24 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
vue router 组件的高级应用实例代码
2019/04/08 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
初步解析Python中的yield函数的用法
2015/04/03 Python
Python复制文件操作实例详解
2015/11/10 Python
python书籍信息爬虫实例
2018/03/19 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
py-charm延长试用期限实例
2019/12/22 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
Java面试题及答案
2012/09/08 面试题
总经理司机职责
2014/02/02 职场文书
道德之星事迹材料
2014/05/03 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
合作协议书模板2014
2014/09/26 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
党员民主评议总结
2014/10/20 职场文书
优秀党员个人总结
2015/02/14 职场文书
在职证明书模板
2015/06/15 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
详解Redis复制原理
2021/06/04 Redis
Python max函数中key的用法及原理解析
2021/06/26 Python
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS