JavaScript实现全选、反选、取消选中

JavaScript实现全选、反选、取消选中

html:

  <h1 class="title">javasript实现全选、反选、取消选中</h1>

    <table class="mytable">
        <tr>
            <th>ID</th>
            <th>商品</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="" id="" class="cbox">
            </td>
            <td>新款连衣裙</td>
            <td>198</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="" id="" class="cbox">
            </td>
            <td>四件套</td>
            <td>530</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="" id="" class="cbox">
            </td>
            <td>潮流T恤</td>
            <td>200</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="" id="" class="cbox" >
            </td>
            <td>时尚女鞋</td>
            <td>630</td>
        </tr>
    </table>
    <br><br><br>
    <div class="ch">
        <button onclick="checkAll()">全选</button>
        <button onclick="reverse()">反选</button>
        <button onclick="cancleAll()">全不选</button>
    </div>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            width: 600px;
            margin: 0 auto 10px;
        }
        .mytable{
            width: 600px;
            border-collapse: collapse;
            margin: 0 auto;
        }
        .mytable th,.mytable td{
            height: 40px;
            line-height: 40px;
            padding: 6px;
            font-size: 16px;
            border: 1px solid black;
        }
        .cbox{
            width: 22px;
            height: 22px;
        }
        .ch{
            width: 600px;
            margin: 0 auto;
        }
        .ch button{
            width: 80px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            margin-right: 20px;
        }
    </style>

javascript:

 <script>
        // 全选
        function checkAll(){
            var checkboxEles = document.getElementsByClassName('cbox')
            // var checkboxEles = document.querySelectorAll('.cbox')
            // console.log(checkboxEles)
            // 遍历
            for(var i=0; i<checkboxEles.length; i++){
                checkboxEles[i].checked = true;
            }

        }
        // 反选 ---方法1 通过 双路分支实现
        // function reverse(){
        //     var checkboxEles = document.getElementsByClassName('cbox')
        //     // 遍历
        //     for(var i=0; i<checkboxEles.length; i++){
        //         if(checkboxEles[i].checked == true){
        //             checkboxEles[i].checked = false;
        //         }else{
        //             checkboxEles[i].checked = true;
        //         }
        //     }
        // }

        // 反选 ---方法2 通过 取反 实现
        function reverse(){
            var checkboxEles = document.getElementsByClassName('cbox')
            // 遍历
            for(var i=0; i<checkboxEles.length; i++){
                //  取反
                // !checkboxEles[i].checked  意思是 当前这个复选框 的checked属性存在。我们就取反。就是让这个属性消失。或者说去掉这个属性
                checkboxEles[i].checked = !checkboxEles[i].checked
            }
        }



        // 全不选
        function cancleAll(){
            var checkboxEles = document.getElementsByClassName('cbox')
            // 遍历
            for(var i=0; i<checkboxEles.length; i++){
                checkboxEles[i].checked = false;
            }
        }
    </script>