JavaScript全选反选

input的checked属性

通过点击切换按钮,实现选框的选中/取消选中效果。主要用于购物车等。

    <style>
        ul.inputul{
            list-style-type:none;
        }
    </style>
    <input type="button" id="inputall" value="全选" /><input type="button" id="inputnotall" value="反选" /><input type="checkbox" id="inputspecial" />
    <ul class="inputul">
        <li><span></span><input type="checkbox"></li>
        <li><span></span><input type="checkbox"></li>
        <li><span></span><input type="checkbox"></li>
        <li><span></span><input type="checkbox"></li>
        <li><span></span><input type="checkbox"></li>
        <li><span></span><input type="checkbox"></li>
    </ul>
    <script>
        var spans=document.querySelectorAll(".inputul span");
        var all=document.querySelector("#inputall");
        var notall=document.querySelector("#inputnotall");
        var inputcheck=document.querySelectorAll(".inputul input");
        var special=document.querySelector("#inputspecial");

        for(var i=0;i<spans.length;i++){
            spans[i].innerHTML=i+1+".";
        }
        all.onclick=function(){
            for(var i=0;i<inputcheck.length;i++){
                inputcheck[i].checked=true;
            }            
            special.checked=true;
        }
        notall.onclick=function(){
            var sum=0;
            for(var i=0;i<inputcheck.length;i++){
                inputcheck[i].checked=!inputcheck[i].checked;
            }
            for(var i=0;i<inputcheck.length;i++){
                if(inputcheck[i].checked==false){
                    break;
                }
                sum++;
            }
            if(sum==inputcheck.length){
                special.checked=true;
            }else{
                special.checked=false;
            }
        }
        var sums=0;
        for(var i=0;i<inputcheck.length;i++){
            inputcheck[i].onclick=function(){
                for(var i=0;i<inputcheck.length;i++){
                    if(inputcheck[i].checked==false){
                        break;
                    }
                    sums++;
                }
                if(sums==inputcheck.length){
                    special.checked=true;
                }else{
                    special.checked=false;
                }
                sums=0;
            }
        }
    </script>