JS如何操作改變radio的狀態

這次帶給大家JS怎樣操作改變radio的狀態，JS操作改變radio的狀態的注意事項有哪些，下面就是實戰案例，一起來看一下。

h5的radio是自帶選取狀態改變的，但是如果自帶的狀態無法滿足自己的需求時，就需要自己去實作。

程式碼如下：

h5部分程式碼

#

<p>
 <label>
  <input>
  最新资料</label>
 <label>
  <input>
  我的资料</label>
 <label>
  <input>
  分类浏览</label>
 <label>
  <input>
  浏览历史</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>
 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>
 <label><img  src="/static/imghwm/default1.png" data-src="images/delate_choose.png" class="lazy" alt="JS如何操作改變radio的狀態" >
  <input>
  最新资料</label>
 <label>
  <img  src="/static/imghwm/default1.png" data-src="images/delate_no_choose.png" class="lazy" alt="JS如何操作改變radio的狀態" >
  <input>
  我的资料</label>
 <label>
  <img  src="/static/imghwm/default1.png" data-src="images/delate_no_choose.png" class="lazy" alt="JS如何操作改變radio的狀態" >
  <input>
  分类浏览</label>
 <label>
  <img  src="/static/imghwm/default1.png" data-src="images/delate_no_choose.png" class="lazy" alt="JS如何操作改變radio的狀態" >
  <input>
  浏览历史</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 <p style="text-align: left;">img的length肯定和radio的length一樣，所以可以只取一個length。 </p><p style="text-align: left;"><strong>效果如下：</strong></p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/a9211bdc751509e818a1652e87465ad5-1.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""></p><p>我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p><p>推薦閱讀：</p><p><a href="http://www.php.cn/js-tutorial-388955.html" target="_blank">怎樣實作微信web端後退強制刷新</a><br></p><p><a href="http://www.php.cn/js-tutorial-388939.html" target="_blank">react native使用fetch上傳圖片</a> <br></p><p><a href="http://www.php.cn/js-tutorial-388951.html" target="_blank">用js快速的取得html頁面中圖片的位址</a><br></p>#

以上是JS如何操作改變radio的狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！