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 相关文章推荐
JS面向对象编程浅析
Aug 28 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
React学习之JSX与react事件实例分析
Jan 06 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 file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
动态样式类封装JS代码
2009/09/02 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
Python获取当前时间的方法
2014/01/14 Python
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python生成密码库功能示例
2017/05/23 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python实现周期方波信号频谱图
2018/07/21 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
创立科技Java面试题
2015/11/29 面试题
2014年酒店年度工作总结
2014/12/10 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书