如何透過js實現動態改變radio狀態（詳細教學）

下面我就為大家分享一篇js實現動態改變radio狀態的方法，具有很好的參考價值，希望對大家有幫助。

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(&#39;class&#39;, &#39;active&#39;);
   }else {
    radio[i].parentNode.setAttribute(&#39;class&#39;, &#39;&#39;);
   }
  }
 }
</script>

效果如下

這裡實現的是頂部boder的動態顯示隱藏並且這裡radio左側預設的圓形按鈕設為了隱藏。如果想要按鈕不隱藏，需要作如下修改

<p class="group">
 <label class="active"><img  src="/static/imghwm/default1.png"  data-src="images/delate_choose.png"  class="lazy"   name="image" alt="如何透過js實現動態改變radio狀態（詳細教學）" >
  <input type="radio" name="parent_radio" value="1" id="new_data" onclick="change()"/>
  最新资料</label>
 <label>
  <img  src="/static/imghwm/default1.png"  data-src="images/delate_no_choose.png"  class="lazy"   name="image" alt="如何透過js實現動態改變radio狀態（詳細教學）" >
  <input type="radio" name="parent_radio" value="0" id="my_data" onclick="change()"/>
  我的资料</label>
 <label>
  <img  src="/static/imghwm/default1.png"  data-src="images/delate_no_choose.png"  class="lazy"   name="image" alt="如何透過js實現動態改變radio狀態（詳細教學）" >
  <input name="parent_radio" type="radio" id="screen_data" value="0" onclick="change()"/>
  分类浏览</label>
 <label>
  <img  src="/static/imghwm/default1.png"  data-src="images/delate_no_choose.png"  class="lazy"   name="image" alt="如何透過js實現動態改變radio狀態（詳細教學）" >
  <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(&#39;class&#39;, &#39;active&#39;);
 }else {
  img[i].src = "images/delate_no_choose.png";
  radio[i].parentNode.setAttribute(&#39;class&#39;, &#39;&#39;);
 }
}

img的length肯定和radio的length一樣，所以可以只取一個length。

效果如下：

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

如何使用Vue-Router模式與鉤子（詳細教學）

在vue-cli中使用vue- router搭建底部導覽列（詳細教學）

在AngularJS中使用select載入資料選取預設值的方法該怎麼處理？

以上是如何透過js實現動態改變radio狀態（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！