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>
爱站程序员基地
