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>
