之前做項目的時候，也遇到過需要按照設計稿把<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;
}
 

js自定義修改復選框單選框樣式，清除復選框單選框默認樣式