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 CSS画图之基础篇
Jul 29 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
快速了解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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
PHP5.3新特性小结
2016/02/14 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
js 金额文本框实现代码
2012/02/14 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
spyder常用快捷键(分享)
2017/07/19 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
python binascii 进制转换实例
2019/06/12 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
商务专员岗位职责
2013/11/23 职场文书
食品安全宣传标语
2014/06/07 职场文书
岗位工作说明书
2014/07/29 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python