实现效果:。
css的input单选框的样式很丑,有时候不想使用原生的样式,如上照片,可以使用下面的方法。
思路是,给inpu加visibility:hidden隐藏,然后使用不同的图片绝对定位覆盖在input上面,之后将不同的图片和input状态绑定一下。设置visibility而不用display的好处是,前者在视觉隐藏的情况下还会占据原来的空间,这样可以调整下面的input和上面的图片大小一致。
<div>
提现方式
<span><img src="img/xuanzhong.png"/><input name="radio" type="radio" checked="true" value="0">微信</span>
<span><img src="img/weixuanzhong.png"/><input name="radio" type="radio" value="1">支付宝</span>
</div>
div span {
position: relative;
margin-left: 20px;
}
div span input{
visibility:hidden;
height:20px;
width:20px;
}
div span img{
position:absolute;
top:0;
left:0;
height:20px;
width:20px;
border-radius:50%;
}
var spans = document.querySelectorAll("span");
var radios = document.querySelectorAll("input[type='radio']");
var imgs = document.querySelectorAll("img");
spans.forEach(function(v, i) {
v.onclick = function() {
if(i == 0) {
imgs[0].src = "xuanzhong.png";
imgs[1].src = "weixuanzhong.png";
radios[1].checked = "false";
radios[0].checked = "checked";
} else {
imgs[0].src = "img/weixuanzhong.png";
imgs[1].src = "img/xuanzhong.png";
radios[0].checked = "false";
radios[1].checked = "checked";
}
}
})
这样当获取的value值等于0是表示选中的是微信,1表示选中的是支付宝。多选框也可以同理设置。
这种方法比较麻烦,虽然可以用jquery简化代码,但是思路并不好。其实不使用单选框也可以。方法二:
<div>
提现方式
<span data-type="0"><img src="img/xuanzhong.png" class="display-block"/>微信</span>
<span data-type="1"><img src="img/xuanzhong.png" class="display-none"/>支付宝</span>
</div>
.display-none{
display:none;
}
.display-block{
display:block;
}
//使用jquery操作逻辑
var $spans = $("div span");
$spans.click(function(){
$spans.children("img").removeClass("display-block").addClass("display-none");
$spans.children("img").removeClass("display-none").addClass("display-block");
console.log($spans.children("img.display-block").attr("data-type");)
//获取span下的含有display-block类名的img元素,取出它的data-type的值就能判断是微信还是支付宝
})