替換input單選框的樣式

實現效果：。

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的值就能判斷是微信仍是支付寶
})

 

我的總結筆記，有誤請指出，謝謝。