实现效果：
。
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表示选中的是支付宝。多选框也可以同理设置。
个人总结笔记，有误请指出，谢谢。
