js实现动态改变收音机状态的方法

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

代码如下：

h5部分代码

p class=' group '标签class=' active '输入类型='收音机'名称=“父无线电”值=' 1 ' id=' new _ data ' onclick=' change()'/最新资料/label标签输入类型=' radio '名称=' parent _ radio '值=' 0 ' id=' my _ data ' onclick=' change()'/我的资料/label标签输入名称=' parent _ radio ' type=' radio ' id=' screen _ data ' value=' 0 ' onclick=' change()'/分类浏览/label标签输入类型=' radio '名称=' parent _ radio '值=' 0 ' id=' history _ data ' onclick=' change()'/浏览历史/标签/pCSS代码

样式输入[type='radio'] { /*取消自带按钮*/color :灰色；显示器：无；} .grouplabel:hover{ /*鼠标移到控件上做的改变*/背景色：矢车菊蓝；} .grouplabel{ /*未选中状态*/float:左侧；color : # 4A4A 4 afont-size : 16px；padd : 10px 11px } . group label . active {/*选中状态*/color : # 316 CEB；font-size : 16px边框-top: 2px实心# 316 cepadd : 10px 11px }/style js方法代码

脚本类型='text/javascript '函数change(){ var radio=document。getelementsbyname(' parent _ radio ')；/*用绰号是为了取到所有的收音机*/var radio ength=收音机。长度；for(var I=0；我无线电工程；{ if(radio[i]).选中){收音机[I]。ParentNode。SetAttribute(' class '，' active ')；} else { radio[I]。ParentNode。SetAttribute(' class '，' ')；} } }/脚本效果如下

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

p class=' group ' label class=' active ' img src=' http : images/delate _ choose。png ' name=' image '输入类型=' radio '名称=' parent _ radio '值=' 1 ' id=' new _ data ' onclick=' change()'/最新资料/label label img src=' http : images/delate _ no _ choose。png ' name=' image '输入类型='radio '名称='parent_radio '值=' 0 ' id=' my _ data ' onclick=' change()'/我的资料/label label img src=' http : images/delate _ no _ choose。png ' name=' image '输入名称=“父无线电”类型='radio' id='screen_data '值='0' onclick='change()'/分类浏览/label label img src=' http : images/delate _ no _ choose。png ' name=' image '输入类型='radio '名称='parent_radio '值=' 0 ' id=' history _ data ' onclick=' change()'/浏览历史/label/p即在每一个移动类型的投入前面加一个img(注意选中和未选中的区别)，JS的变化方法做以下修改

var radio=文档。getelementsbyname(' parent _ radio ')；var img=文档。getelementsbyname(' image ')；/*用绰号是为了取到所有的收音机*/var radio ength=收音机。长度；for(var I=0；我无线电工程；{ if(radio[i]).选中){ img[i].src=' images/delate _ choose。png '；收音机[我]。ParentNode。SetAttribute(' class '，' active ')；}else { img[i].src=' images/delate _ no _ choose。png '；收音机[我]。ParentNode。SetAttribute(' class '，' ')；}}img的长度肯定和收音机的长度一样，所以可以只取一个长度。

效果如下：

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

这篇射流研究…实现动态改变收音机状态的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。