单选框、复选框的美化

单选框、复选框的美化-JS原生

对于一些标签，在我们不喜欢它自带样式的时候，可以使用覆盖或隐藏的方式给其更改外观，这次我使用的是覆盖的方法。

1. 复选框美化
   先放一张原来的样式图
   
   把每个input标签用一个div包起来

<div class="check">
    <input type="checkbox" class="check2">  111</input>
</div>

在js部分，让页面加载完成之后，在input上覆盖一个span标签，给其添加样式（样式设计部分就不贴出来了，每个人喜欢的风格不一样）

var CHECK=document.getElementsByClassName("check");
    /*div*/
var SP=document.getElementsByClassName("check1");
    /*span*/
var INP=document.getElementsByClassName("check2");
    /*input*/
window.onload=function(){
        for(var i=0;i<CHECK.length;i++){
            var SS=document.createElement("span");
            SS.className='check1';
            SS.innerHTML='&radic;';
             /*这里是给它添加了一个对勾*/
            CHECK[i].insertBefore(SS,CHECK[i].childNodes[0]);
        }
}

当然光添加样式是不够的，因为点击之后还得让input产生效果，因此我们需要将span的点击事件和input关联起来

for(var i=0;i<CHECK.length;i++){
        CHECK[i].index=i;
        CHECK[i].onclick=function(){
            if(INP[this.index].checked!=false){
                this.style.color='#000';
                SP[this.index].style.background='#fff';
                INP[this.index].checked=false;
            }else{
                this.style.color='#409EFF';
                SP[this.index].style.background='#409EFF';
                INP[this.index].checked=true;
            }   
        }
  }

最后出来的效果就是这样

2. 单选框美化
单选框的美化和复选框大同小异，所以我就不贴过多的代码了。它的特性是只能选择一个按钮，js部分需要注意一下，最关键的就是记得要设置一样的name名。

<div class="check">
    <input type="radio" class="check2" name="ra">  111</input>
</div>
<div class="check">
    <input type="radio" class="check2" name="ra">  222</input>
</div>

另外就是在js部分，点击其中一个按钮的时候，我们要手动的去消除其他几个span的样式。

CHECK[i].onclick=function(){
    for(var j=0;j<CHECK.length;j++){
        CHECK[j].style.color='#000';
        SP[j].style.background='#fff';
    }
}

最后出来的效果图是这样

大家有觉得不对的地方可以留言讨论，以后会继续改进，继续完善