h5的radio是自帶選中狀态改變的，但是如果自帶的狀态無法滿足自己的需求時，就需要自己去實作。
代碼如下：
h5部分代碼
最新資料
我的資料
分類浏覽
浏覽曆史
CSS代碼
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;
}
JS方法代碼
function change()
{
var radio = document.getElementsByName("parent_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', '');
}
}
}
效果如下
這裡實作的是頂部boder的動态顯示隐藏并且這裡radio左側預設的圓形按鈕設為了隐藏。如果想要按鈕不隐藏，需要作如下修改
最新資料
我的資料
分類浏覽
浏覽曆史
即在每一個raido類型的input前面加一個img(注意選中和未選中的差別)，JS的change方法做以下修改
var radio = document.getElementsByName("parent_radio");
var img = document.getElementsByName("image");
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。
效果如下：
由于自己剛學的h5，很多東西不熟練，不敢說自己的方法就是正确方法，隻是為了記錄學習過程，是以把學到的一些東西寫在這裡，望大家不吝賜教。
這篇js實作動态改變radio狀态的方法就是小編分享給大家的全部内容了，希望能給大家一個參考，也希望大家多多支援腳本之家。