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 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 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 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('class', 'active'); }else { radio[i].parentNode.setAttribute('class', ''); } } } </script>
The effect is as follows
<p class="group"> <label class="active"><img src="images/delate_choose.png" name="image"> <input type="radio" name="parent_radio" value="1" id="new_data" onclick="change()"/> 最新资料</label> <label> <img src="images/delate_no_choose.png" name="image"> <input type="radio" name="parent_radio" value="0" id="my_data" onclick="change()"/> 我的资料</label> <label> <img src="images/delate_no_choose.png" name="image"> <input name="parent_radio" type="radio" id="screen_data" value="0" onclick="change()"/> 分类浏览</label> <label> <img src="images/delate_no_choose.png" name="image"> <input type="radio" name="parent_radio" value="0" id="history_data" onclick="change()"/> 浏览历史</label> </p>
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 < 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', ''); } }
The effect is as follows:
How to implement back force refresh on WeChat web side
react native uses fetch to upload images
Use js to quickly get the address of the image in the html page
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!