简易版全选

fwxstar 2018-06-28 599次浏览

摘要:   <ul>         <li><input type="...
  <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>
 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
            }
        }

    }


项目地址:http://jsrun.net/dWgKp/edit