原生js實現全選和反選以及任意一個未被選中的效果

模仿一個百度音樂的全選和反選的的操作。

html代碼如下：

<div class="box">
    <ul id="lists">
        <li>
            <input type="checkbox" value="">
            <span>我愛你中國</span>
        </li>
        <li>
            <input type="checkbox" value="">
            <span>北京</span>
        </li>
        <li>
            <input type="checkbox" value="">
            <span>花火</span>
        </li>
        <li>
            <input type="checkbox" value="">
            <span>回來</span>
        </li>
    </ul>
    <p>
        <input type="checkbox" value="">
        <span>全選</span>
    </p>
</div>

css代碼如下：

<style>
    *{margin:0;padding:0;}
    ul,li{list-style: none;margin:0;padding:0;}
    li{line-height:45px;padding:0 15px;}
    .box{border:1px solid #e5e5e5;width:200px;margin:0 auto;}
    #lists{width:200px;}
    p{line-height:45px;border-top:1px solid #e5e5e5;padding:0 15px;}
</style>

js代碼如下：

window.onload=function(){
        var oUl=document.getElementById("lists");
        var aLi=oUl.getElementsByTagName("li");
        var oP=document.getElementsByTagName("p")[0];
        var aQxuan=oP.getElementsByTagName("input")[0];
        var arrColor=["#f6f6f6","#f0fdff"];
        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].style.backgroundColor=arrColor[i%arrColor.length];//所有的li隔行變色
            //鼠標移入li背景變灰
            aLi[i].onmouseover=function(){
                this.style.backgroundColor="#ccc"
            };
            //鼠標移出li背景變當前色值
            aLi[i].onmouseout=function(){
                this.style.backgroundColor=arrColor[this.index%arrColor.length]
            };
            //全選
            aQxuan.onclick=function(){
                //alert(1)
                if(this.checked==true){
                    for(var i=0;i<aLi.length;i++){
                        var aInp=aLi[i].getElementsByTagName("input")[0];
                        aInp.checked=true;
                    }
                }else{
                    for(var i=0;i<aLi.length;i++){
                        var aInp=aLi[i].getElementsByTagName("input")[0];
                        aInp.checked=false;
                    }
                }
            };

            var aInp=aLi[i].getElementsByTagName("input")[0];

            aInp.onclick=function(){
                if(this.checked==false){//只要自己未被選中，那么總得全選就不被選中
                    aQxuan.checked=false;
                }else{
                    var onOff=true;//設定一個開關
                    for(var i=0;i<aLi.length;i++){
                        var Inp=aLi[i].getElementsByTagName("input")[0];
                        if(Inp.checked==false){
                            onOff=false;//若有一個未被選中，那么開關就為假
                        }
                    }
                    if(onOff){
                        aQxuan.checked=true;
                    }
                }
            }
        }


    }

代碼運行效果圖如下：