SOURCE

 var aLi=document.getElementsByTagName("li");
    var eAll=document.getElementById("sAll");
    var aI=aLi[0].children[0];
    var len=aLi.length;
    var len2 = 0;

    for(var i=0;i<aLi.length;i++){
        aLi[i].children[0].onclick= function () {
            if(this.checked){
                len2++;
                this.parentNode.className = "active"
            }else{
                eAll.checked = false;
                len2--;
                this.parentNode.className = ""
            }
            if(len2 == len){
                eAll.checked = true;
            }
        };
    }
    eAll.onclick= function () {
        for(var i=0;i<aLi.length;i++){
            if(this.checked){
                aLi[i].className = "active";
                aLi[i].children[0].checked = true;
            }else{
                aLi[i].className = '';
                aLi[i].children[0].checked = false
            }
        }

    }

  <ul>
        <li><input type="checkbox"/>something</li>
        <li><input type="checkbox"/>something</li>
        <li><input type="checkbox"/>something</li>
        <li><input type="checkbox"/>something</li>
        <li><input type="checkbox"/>something</li>
        <li><input type="checkbox"/>something</li>
    </ul>
    <p>
        <input type="checkbox" id="sAll"/>
        <span>全选</span>
    </p>

  *{margin: 0;padding: 0;list-style: none;font-family: "microsoft yahei";}
        div{ width: 500px;margin: 20% auto;}
        ul li{line-height: 35px; padding-left: 15px;}
        ul li input{ margin-right: 15px;display: inline-block;}
        ul li:nth-child(odd){ background: #eee;}
        ul li:nth-child(even){background: #ccc;}
        ul li:hover,ul li.active{ background: #6592c4;}
        p{cursor: pointer;margin: 15px;}