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 相关文章推荐
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
js里的prototype使用示例
Nov 19 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
微信小程序自动客服功能
Nov 02 Javascript
vue实现评论列表功能
Oct 25 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
PHP 502bad gateway原因及解决方案
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
php5新改动之短标记启用方法
2008/09/11 PHP
用php解析html的实现代码
2011/08/08 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
tensorflow更改变量的值实例
2018/07/30 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
python安装后的目录在哪里
2020/06/21 Python
python 如何将office文件转换为PDF
2020/09/22 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
《盘古开天地》教学反思
2014/02/28 职场文书
和解协议书
2014/04/16 职场文书
写得不错的求职信范文
2014/07/11 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python