js自定义修改复选框单选框样式，清除复选框单选框默认样式

之前做项目的时候，也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认样式进行修改，但发现，并没有可以重置效果的方法，之前用过-webkit-appearance的方法，但是这个只在webkit内核的浏览器里面生效，火狐不生效。
所以自己写了个js，用li来模拟复选框和单选框的效果，很简单，7行就行。

效果图：

涉及到的知识点：自定义属性来存储点击状态和原来的class名

html内容：

<div id="box">    <p>你最喜欢的运动</p>    <ul>        <li>爬山</li>        <li>骑车</li>        <li>游泳</li>        <li class='hong'>篮球</li>        <li class='hong'>足球</li>        <li>羽毛球</li>        <li>跳绳</li>        <li>跑步</li>    </ul></div>

js内容：
注释比较多，是为了说明清楚，可能有点乱，能看懂的可以把注释删掉

var aLi = document.querySelectorAll('#box ul li');  /*获取所有的li，如果要用class获取，可写成document.querySelectorAll('.class')*/for (var i=0;i<aLi.length;i++ ){    aLi[i].ifCheck = false;                        /*自定义属性用来表示有没有被选中，初始化设置成false，未选中*/    aLi[i].nowClass = aLi[i].className;            /*自定义属性用来存储最初的className，例如html内容里的class名，hong，这样在后面添加on的class名之后，不会导致原来的class名直接被覆盖*/    aLi[i].onclick = function(){         if(this.ifCheck){                         /*当点击当前li时，如果ifCheck是已经被选中状态*/            this.className = this.nowClass         /*则让当前点击的li的class名等于最初的名字，也就是说把选中的on的class名去掉*/    }else{            this.className += ' on'                /*如果是未选中状态，则加上on，表示被选中*/            }                                      /*可写成三目样式 this.className = this.ifCheck?this.nowClass:this.className+' on';*/        this.ifCheck = !this.ifCheck;              /*一开始未选中，点击之后变成选中，不然相反，所以要给ifCheck的属性取反*/    };};

css样式：

#box{    width:600px;    margin:50px auto;}#box p{    font-size:14px;    font-weight:bold;    border-bottom:1px dashed #000;    line-height:30px;}#box ul{    margin-top:10px;    overflow:hidden;}#box ul li{    width:67px;    height:20px;    float:left;    background-image:url(images/ck.png);  /*未选中时候的背景图*/    background-repeat:no-repeat;    font-size:12px;    line-height:20px;    text-indent:30px;    margin-right:8px;    cursor:pointer;}#box ul li.on{    background-image:url(images/cked.jpg);   /*选中时候的背景图*/}#box ul li.hong{    color:red;}

---

本博客原创文章，若要转载，请注明出处
有问题或者有错误的地方，可以留言，咱们讨论一下