How to use JS to change the status of radio

This time I will show you how to use JS to change the status of the radio. What are the precautions for changing the status of the radio using JS? The following is a practical case, let's take a look.

h5's radio comes with a selected state change, but if the built-in state cannot meet your needs, you need to implement it yourself.

The code is as follows:

h5 partial code

<p>
 <label>
  <input>
  最新资料</label>
 <label>
  <input>
  我的资料</label>
 <label>
  <input>
  分类浏览</label>
 <label>
  <input>
  浏览历史</label>
</p>

CSS code

<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 method code

<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>

The effect is as follows

What is implemented here is the dynamic display and hiding of the top boder and the default round button on the left side of the radio is set to hidden. If you want the button not to be hidden, you need to make the following modifications

<p>
 <label><img  src="/static/imghwm/default1.png" data-src="images/delate_choose.png" class="lazy" alt="How to use JS to change the status of radio" >
  <input>
  最新资料</label>
 <label>
  <img  src="/static/imghwm/default1.png" data-src="images/delate_no_choose.png" class="lazy" alt="How to use JS to change the status of radio" >
  <input>
  我的资料</label>
 <label>
  <img  src="/static/imghwm/default1.png" data-src="images/delate_no_choose.png" class="lazy" alt="How to use JS to change the status of radio" >
  <input>
  分类浏览</label>
 <label>
  <img  src="/static/imghwm/default1.png" data-src="images/delate_no_choose.png" class="lazy" alt="How to use JS to change the status of radio" >
  <input>
  浏览历史</label>
</p>

That is, add an img in front of each raid type input (note the difference between selected and unselected), and make the following modifications to the JS change method

The length of

var radio = document.getElementsByName("parent_radio");
var img = document.getElementsByName("image");
/*用ByName是为了取到所有的radio*/
var radioLength = radio.length;
for(var i = 0;i img must be the same as the length of radio, so you can only take one length. <p style="text-align: left;"></p><p style="text-align: left;">The effect is as follows: <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># I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites related articles! <p></p>Recommended reading: <p></p><p>How to implement back force refresh on WeChat web side<a href="http://www.php.cn/js-tutorial-388955.html" target="_blank"></a><br></p><p>react native uses fetch to upload images<a href="http://www.php.cn/js-tutorial-388939.html" target="_blank"> </a><br></p><p>Use js to quickly get the address of the image in the html page<a href="http://www.php.cn/js-tutorial-388951.html" target="_blank"></a><br></p>

The above is the detailed content of How to use JS to change the status of radio. For more information, please follow other related articles on the PHP Chinese website!