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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
node.js基础知识小结
Feb 26 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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/10/09 PHP
删除数组元素实用的PHP数组函数
2008/08/18 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python实现京东秒杀功能代码
2019/05/16 Python
Python while true实现爬虫定时任务
2020/06/08 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python opencv实现图像配准与比较
2021/02/09 Python
英格兰足协官方商店:England Store
2019/07/12 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
厉行勤俭节约倡议书
2014/05/16 职场文书
竞聘上岗演讲
2014/05/19 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
申报优秀教师材料
2014/12/16 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript