js全选反选很重要的很简洁的必须掌握的

tomcat2022 / 2023-08-24 / 原文

<html>
    <head>
       <style>
          *{
            margin:0;
            padding:0;
          }
          table{
            border-collapse:collapse;
            border-spacing: 0;
            border:1px solid #c0c0c0;
            width:500px;
            margin:100px auto;
            text-align: center;
          }

          td{
            border:1px solid #d0d0d0;
            color:#404060;
            padding:10px;
          }
          .allCheck{
            width:80px;
          }
       </style>
    </head>
    <body>
        <table>
            <tr>
                <th class="allCheck">
                    <input type="checkbox" name="checkAll" id="checkAll">
                    <span class="all">全选</span> 
                    <input type="checkbox" name="RevcheckAll" id="RevcheckAll">
                    <span class="Revall">反选</span> 
                </th>
                <th>商品</th>
                <th>商家</th>
                <th>价格</th>
            </tr>
            <tr>
               
                <td> <input type="checkbox" name="check" class="ck"></td>
                <td>小米手机</td>
                <td>小米</td>
                <td>11999</td>
            </tr>
            <tr>
               
                <td> <input type="checkbox" name="check" class="ck"></td>
                <td>小米热水器</td>
                <td>小米</td>
                <td>11999</td>
            </tr>
            <tr>
               
                <td><input type="checkbox" name="check" class="ck"></td>
                <td>小米电视</td>
                <td>小米</td>
                <td>11999</td>
            </tr>
        </table>
    </body>
    <script>
        //1.获取大复选框 
        const checkAll=document.querySelector('#checkAll');
        const RevcheckAll=document.querySelector('#RevcheckAll');//反选按钮

        //获取小的复选框
        const cks=document.querySelectorAll('.ck');

        //3.点击大复选框

        checkAll.addEventListener('click',function(){
            for(let i=0;i<cks.length;i++){
                cks[i].checked=this.checked;
            }
        })
        //小勾选框控制大勾选框
        //5.1 给小复选框添加点击事件
        for(let i=0;i<cks.length;i++){
            //判断选中的小复选框
            cks[i].addEventListener('click',function(){
              checkAll.checked=document.querySelectorAll('.ck:checked').length===cks.length;
            })
        }


        //反选的 我还没想到，这个代码先存着，我有空的时候来完善以下。
        RevcheckAll.addEventListener('click',function(){
            //不懂得怎么写了 ，可是这个非常重要啊
        })
    </script>
   
   </table> 
</html>