时间:2021-05-26
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"); 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>效果如下
这里实现的是顶部boder的动态显示隐藏并且这里radio左侧默认的圆形按钮设为了隐藏。如果想要按钮不隐藏,需要作如下修改
<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>即在每一个raido类型的input前面加一个img(注意选中和未选中的区别),JS的change方法做以下修改
var radio = document.getElementsByName("parent_radio");var img = document.getElementsByName("image");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的length肯定和radio的length一样,所以可以只取一个length。
效果如下:
由于自己刚学的h5,很多东西不熟练,不敢说自己的方法就是正确方法,只是为了记录学习过程,所以把学到的一些东西写在这里,望大家不吝赐教。
这篇js实现动态改变radio状态的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JavaScript动态改变div属性的实现方法。分享给大家供大家参考。具体如下:这里可以通过JS动态改变div属性,样式等varoBox=doc
本文实例讲述了js实现表单Radio切换效果的方法。分享给大家供大家参考。具体如下:这里基于js实现表单中的Radio单选框切换效果,当选中某个单选框的时候,所
由于项目的需求,要求radio点击两次后为取消状态,不方便修改为checkbox,可以用正面的方法实现。//jquery$('input:radio').cli
用JS实现的radio图片选择按钮效果。注意:input后面的空格。用到的图片:用JS实现的radio图片选择按钮效果-.lanrentukuimg{borde
上一文,介绍了vue.js动态添加、删除绑定的radio选项,本文介绍如何选中radio的某一项绑定的数据和上文的model是一致的,选中radio或者chec