How to dynamically change radio status through js (detailed tutorial)

Below I will share with you a js method to dynamically change the radio status. It has a good reference value and I hope it will be helpful to everyone.

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

   最新资料   我的资料   分类浏览   浏览历史 

CSS code

JS method code

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

   最新资料    我的资料    分类浏览    浏览历史 

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

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 must be the same as the length of radio, so you can only take one length.

The effect is as follows:

#The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use Vue-Router patterns and hooks (detailed tutorial)

Using vue- in vue-cli Router builds the bottom navigation bar (detailed tutorial)

How to use select to load data and select the default value in AngularJS?

The above is the detailed content of How to dynamically change radio status through js (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!