全选反选案例

个人名片：
 作者简介：一名大一在校生，web前端开发专业
  个人主页：几何小超
 座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
 **学习目标: 坚持每一次的学习打卡，掌握更多知识！虽然都说前端已死，但是就算不靠这个吃饭，学一点东西总比啥也不知道的
 

今天学习了这个新知识，新知识学完后就得写博客巩固一下！！

首先我们得制作一个表格

先写出表格的架构

HTML:

    

      

         全选
      
      
商品
      
商家
      
价格
    
    

      

        
      
      
小米手机
      
小米
      
￥1999
    
    

      

        
      
      
小米净水器
      
小米
      
￥4999
    
    

      

        
      
      
小米电视
      
小米
      
￥5999
    
  

然后我们来进行CSS样式

 * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }

最后就是JS代码

我们来着重进行讲解：

首先我们需要获取的第一个大复选框

第二部复选小的复选框

我们现在都获取完了，进行点击事件，我们得需要一点击大复选框我们就会自动选中下面的小复选框，最后得出结果只有两个值turn或者是false，如果只有单个被选中那么就输出false，如果全部被选中就输出ture

然后在下面我们需要使用for循环。让小复选框等于我们的大复选框

这个this是指当前变量大复选框，因为指定了这个大复选框

下一步让小复选框来控制我们的大复选框，就是我们如果下面都选中了的话，那么我们的大复选框就会被选中

所有呢我们第一步变量这个小复选框，然后给咱们小复选框添加点击事件，然后用我们大复选框来选中被选中的小复选框，

document.querySelectorAll('.ck:checked').length 的意思是选中所有的被选中的小复选框，然后后面就是进行一个判断，如果你的小复选框都被选中，你的大复选框就会被选中

上面就是一个详细的判断了：

接下来放源码

  
  
  



  

    

      

         全选
      
      
商品
      
商家
      
价格
    
    

      

        
      
      
小米手机
      
小米
      
￥1999
    
    

      

        
      
      
小米净水器
      
小米
      
￥4999
    
    

      

        
      
      
小米电视
      
小米
      
￥5999
    
  
  

            看到这记得三连支持一下哈哈哈！！，你的支持是对我最大的赞扬谢谢大家