通过JavaScript 实现简单的全选、不全选

目录

一、思路

我们要做到，选择了全选按钮，让下面的所有的按钮都要勾取。

实现的思路是，全选的按钮是否勾取，勾取后通过for循环来得到每一个按钮，赋值上全选按钮的勾取状态。

展示效果1：

有了全选按钮，实现其他按钮的勾取，我们也要实现，主动勾取完了所有按钮，全选按钮要自动勾取，反之没有勾取完，全选按钮不处于勾取状态

效果展示2：

二、实现效果

1.h5的布局

2.js代码

1.获取元素

2.获取全选，通过循环将选择按钮都赋上选择状态

3.设置，选择按钮全勾选后，全选按钮自动勾取，反之则取消勾取

---

一、思路

我们要做到，选择了全选按钮，让下面的所有的按钮都要勾取。

实现的思路是，全选的按钮是否勾取，勾取后通过for循环来得到每一个按钮，赋值上全选按钮的勾取状态。

展示效果1：

有了全选按钮，实现其他按钮的勾取，我们也要实现，主动勾取完了所有按钮，全选按钮要自动勾取，反之没有勾取完，全选按钮不处于勾取状态

效果展示2：

二、实现效果

1.h5的布局

主要由复选框构造一个全选按钮，在使用ul设置其他的选择按钮 复选框：checkbox

css的布局 简单的删除li前面的默认样式。

   
   

     
     

      
      

     
     
     
     

      
      

       
       <style>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       li{
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       list-style: none;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </style>
      
      
     
     
   
   

   
   

     
     

      
      

     
     
     
     

      
      
    
       
       <input type="checkbox" id="selectAll">我的爱好
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <ul class="ckboxs">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       <li>
       
       <input type="checkbox">唱歌
       
       </li>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       <li>
       
       <input type="checkbox">打球
       
       </li>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       <li>
       
       <input type="checkbox">跳舞
       
       </li>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       <li>
       
       <input type="checkbox">跑步
       
       </li>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       <li>
       
       <input type="checkbox">画画
       
       </li>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       </ul>
      
      
     
     
   
   

2.js代码

1.获取元素

   
   

     
     

      
      

     
     
     
     

      
      
 
       
       let selectAll = 
       
       document.
       
       querySelector(
       
       '#selectAll');
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
       
       let ckboxs = 
       
       document.
       
       querySelectorAll(
       
       '.ckboxs input');
      
      
     
     
   
   

2.获取全选，通过循环将选择按钮都赋上选择状态

   
   

     
     

      
      

     
     
     
     

      
      

       
       selectAll.
       
       onclick=
       
       function(
       
       ){
      
      
     
     

     
     

      
      

     
     
     
     

      
      
         
       
       //  全选按钮的状态
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       let state = selectAll.
       
       checked;
      
      
     
     

     
     

      
      

     
     
     
     

      
      
           
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       //循环每一个ckboxs，为全选状态
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       for(
       
       let i=
       
       0;i<ckboxs.
       
       length;i++){
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                   ckboxs[i].
       
       checked=state;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               }
      
      
     
     
   
   

3.设置，选择按钮全勾选后，全选按钮自动勾取，反之则取消勾取

   
   

     
     

      
      

     
     
     
     

      
      
  
       
       for(
       
       let i=
       
       0;i<ckboxs.
       
       length;i++){
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               ckboxs[i].
       
       onclick=
       
       function(
       
       ){
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       //默认都勾取
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       let flag = 
       
       true;
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       for(j=
       
       0;j<ckboxs.
       
       length;j++){
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       if(ckboxs[j].
       
       checked==
       
       false){
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       //如果checked如果有一个没选上就是false
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                   flag=
       
       false;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                   }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               selectAll.
       
       checked=flag;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                   }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }