这次给大家带来JS怎样操作改变radio的状态，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。
效果如下：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
