Jquery实现全选反选

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.5.0.min.js"></script>
</head>

<body>
    <input type="checkbox" id="a1">全选 <input type="button" value="反选" id="a3"><br />
    <input type="checkbox" class="a2"> 张三 <br />
    <input type="checkbox" class="a2"> 李四<br />
    <input type="checkbox" class="a2"> 王五

    <script>
     //设置全选
     $('#a1').click(function (){
    
    
         let flag = $(this).prop('checked'); // 获得点击的按钮的选中状态 ，true /false.
         $('#a1,.a2').prop('checked', flag);
      
        //  if(flag){
    
    
        //      $('#a1,.a2').prop('checked',true);
        //  }else{
    
    
        //     $('#a1,.a2').prop('checked',false);
        //  }
        
     });

     // 设置小按钮的选中状态
     $('.a2').click(function (){
    
    
     
        xiao(); // 调用
     });

     //设置反选
     $('#a3').click(function () {
    
       
        let xz = $('.a2'); // 获取所有的复选框
        xz.each(function (elm){
    
     // 利用jq中的 each 遍历 所有的复选框
         $(this).prop('checked',!$(this).prop('checked')); // 直接将复选框的状态取反
       
         // 取反后要判断此时的 复选框是否全都选中了， 直接调用封装的函数；
         xiao();
        })
     });

      // 封装函数： 复选框的选中状态
     function xiao(){
    
    
        let sy = $('.a2').length; // 获得所有的复选框的个数
         let xz= $('.a2:checked').length; // 获得所有 复选框的选中个数
         $('#a1').prop('checked', sy== xz); // 将复选框的所有个数个跟 复选框的选中个数 的判断结果赋值给 全选按钮。
     };
    </script>
</body>

</html>
Jquery实现 全选反选

Jquery实现 全选反选

猜你喜欢

Jquery实现全选反选

Jquery实现全选反选
