全选，反选，单选

// 全选

$("#checkAll").click(function(){

var cl= $(this).hasClass('action')

if(!cl){

    $(this).addClass('action');
    
    $('.tbodyClass').find('i').addClass('action');
    
    $(".input").prop('checked',true);
    
}else{

    $(this).removeClass('action');
    
    $('.tbodyClass').find('i').removeClass('action')
    
    $(".input").prop('checked',false)
    
}
复制代码

}); //单选

$(".tbodyClass i").click(function(){

var cl= $(this).hasClass('action');

if(!cl){

    $(this).addClass('action');
    
    $(this).parent().find('input').addClass('action')
    
}else{

    $(this).removeClass('action');
    
    $(this).parent().find('input').removeClass('action')
    
}

// 反选

var len=$(".tbodyClass i").length;
复制代码

// 定义一个存放点击过的数组

var arr=[];

var t=$(".input");

for(var j=0;j<len;j++){

    var mm=$(t).eq(j).hasClass('action');
    
    if(mm){
    
        arr.push($(t))
        
    }
    
}

if(arr.length==len){

    $("#checkAll").addClass('action');
    
}else{

    $("#checkAll").removeClass('action');
    
}
复制代码

});

//html

<label>

<input type="checkbox" name="sport" hidden>

<i id="checkAll" checked="checked"></i>

 全选
 
</label>
复制代码

   <thead>
   
       <tr>
       
         <th>序号</th>
         
         <th>名称</th>
         
         <th>IP地址</th>
         
         <th>Mac地址</th>
         
         <th>操作</th>
         
       </tr>
       
   </thead>
   
   <tbody class="tbodyClass">
   
       <tr>
       
         <td>
         
            <label class="case">
            
            <input type="checkbox" name="sport" hidden class="input" >
            
            <i checked="checked"></i>
            
             1
             
           </label>
           
         </td>
         
             <td>2745-023</td>
             
             <td>192.168.1.15</td>
             
             <td>192.168.1.16</td>
             
             <td><img src="image/shanchu2.png" class="cut"></td>
             
         </tr>
         
         <tr>
         
             <td>
             
              <label class="case">
              
               <input type="checkbox" name="sport" hidden class="input" >
               
               <i checked="checked"></i>
               
               16
               
               </label>
               
             </td>
             
               <td>2745-023</td>
               
                <td>192.168.1.16</td>
                
                <td>192.168.1.16</td>
                
                <td><img src="image/shanchu2.png" class="cut"></td>
                
                 </tr>
                 
     </tbody>
复制代码

//css

label i{

width: 18px;

height: 18px;

border: 2px solid #515151;

border-radius: 4px;

display: inline-block;

vertical-align: middle;

margin-right: 5px;
复制代码

} .action{

background: url("../image/xuanzhong.jpg")center center no-repeat deepskyblue;//自己找图

background-size: 20px 20px;

border: 2px solid #4b7aca;
复制代码

}