jQuery全选反选按钮的实现

jQuery实现全选反选

css样式

  <style>    
     * {      margin: 0;      padding: 0;    }
    .box {     width: 200px;     
               border: 10px solid #333;    
               margin: 50px auto; 
               padding: 20px;    }
     hr {      margin: 20px 0;    }
    .fan {      float: right;    }  
  </style>

HTML结构

  <div class="box">
    <div class="fan">      
      <button>反选</button>    
    </div>
    <div class="all">      
      全选<input type="checkbox">   
    </div>
    <hr>
    <div class="select">     
       选项一： <input type="checkbox"><br>      
       选项二： <input type="checkbox"><br>      
       选项三： <input type="checkbox"><br>      
       选项四： <input type="checkbox"><br>    
    </div>  
  </div>

####js代码

<script src="./jquery/jquery.min.js"></script>
<script>
  /* 全选反选        
  1. 点击全选按钮的时候的事件          
     => 点击的是 .all > input          
     => 如果自己的状态是 true, 那么就让所有选项的 input 都是 true          
     => 如果自己的状态是 false, 那么就让所有选项的 input 都是 false          
     => 自己的状态是什么, 多有选项的状态就是什么          
     => 状态: 就是操作 checked 属性, 使用 prop 方法来设置 checked 属性        
  2. 点击每一个选项按钮的时候         
     => 点击的是 .select > input         
     => 点击每一个的时候, 都要判断一下, 是不是所有的选项按钮都是 true          
     => 当点击的时候, 每一个都是 true, 那么全选按钮的 checked 就是 true          
     => 当点击的时候, 只要有一个是 false, 那么全选按钮的 checked 就是 false        
  3. 点击反选按钮的时候          
     => 点击的就是 .fan > button          
     => 每一个选项的状态都是自己的反过来          
     => 也就是如果自己是 true 那么就变成 false          
     => 如果自己是 false, 那么就变成 true        
  */

      //1.全选        
      $('.all > input').click(function(){           
           $('.select > input').prop('checked',this.checked)        
      })
      //2.每一个选项按钮       
      $('.select > input').click(function(){
            // 如果四个的 checked 都是 true, 那么全选按钮就是 true      
            // 如果四个里面有任意一个是 false, 那么全选按钮就是 false  
            // 定义一个变量假设他们都是 true          
           var flag = true;            
           $('.select input').each(function(index,item){                
               if(item.checked === false){                    
                  flag = false;                
                }            
           })           
           $('.all > input').prop('checked',flag)       
      })
      // 3.反选        
      $('.fan button').click(function(){
          // 让每一个 select 下面的 input 都改变自己的状态            
           $('.select > input').each(function(index,item){               
                item.checked = !item.checked           
           })
           
            var flag = true;            
            $('.select > input').each(function(index,item){                
                if(item.checked === false){                    
                    flag = false;                
                 }            
            })           
            $('.all input').prop('checked',flag)        
       })
</script>