下面我就为大家分享一篇js实现动态改变radio状态的方法，具有很好的参考价值，希望对大家有所帮助。
h5的radio是自带选中状态改变的，但是如果自带的状态无法满足自己的需求时，就需要自己去实现。
代码如下：
h5部分代码
CSS代码
JS方法代码
效果如下
这里实现的是顶部boder的动态显示隐藏并且这里radio左侧默认的圆形按钮设为了隐藏。如果想要按钮不隐藏，需要作如下修改
即在每一个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。
效果如下：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue-cli中使用vue-router搭建底部导航栏（详细教程）
在AngularJS中使用select加载数据选中默认值的方法该怎么处理？
