js版本的全选 反选 和全不选

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30500113/article/details/75267071

这个以后做批量删除之类的时候应该会用到 先记录下来

这里写图片描述

<button id="b1">全选</button>
     <button id="b2">反宣</button>
     <button id="b3">全不选</button>

     <input type="checkbox" />白菜
     <input type="checkbox" />猪肉
     <input type="checkbox" />粉条
     <input type="checkbox" />萝卜
     <input type="checkbox" />青菜

     <script type="text/javascript">
        var b1 = document.getElementById("b1");
        var b2 = document.getElementById("b2");
        var b3 = document.getElementById("b3");
        var input = document.getElementsByTagName("input")

        //全选
        b1.onclick = function (){
            for(var i = 0;i<input.length;i++){
                input[i].checked = true;
            }
        }

        //全不选
        b3.onclick = function (){
            for(var i = 0;i<input.length;i++){
                input[i].checked = false;
            }
        }

        //反选
        b2.onclick = function (){
            for(var i = 0;i<input.length;i++){
                input[i].checked = !input[i].checked;
            }
        }
     </script>

猜你喜欢

转载自blog.csdn.net/qq_30500113/article/details/75267071