综合使用前端三件套的一个小题目：
要求：
全选：选中上⾯的复选框，下⾯所有复选框设置为选中状态
全不选：取消选中⾯⽅的复选框，下⾯所有的复选框设置为未选状态
反选：点击反选按钮，下⽅选中的复选框设置为未选状态，下⽅未选中的复选框设置为选中状 态
效果图：
点击图中的全选框，没有选项被选中时，将选中所有选项；有选项被选中时，将取消所有选中选项； 点击图中的反选框，会反选未选中的选项
代码：
CSS在代码第一部分；HTML在代码第二部分；使用jQuery实现JS效果，在代码第三部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选、全不选与反选</title> <style> body{ background-color: beige; font-size:15px; font-family:"宋体"; } table{ border-collapse: collapse; /* 合并单元格边框 */ border-spacing: 0; /* 设置单元格间距为0 */ } /* 表头样式 */ th{ align-items: center; background-color: bisque; } /* 单元格样式 */ td{ width: 150px; height: 20px; } .td2{ width: 80px; } .center-checkbox { text-align: center; /* 将多选框及其标签水平居中 */ display: flex; /* 使用 Flex 布局 */ justify-content: center; /* 将元素垂直居中 */ align-items: center; /* 将元素垂直居中 */ } </style> </head> <body> <!-- 创建表格 --> <!-- 第一行 --> <table border="1" class="center-checkbox"> <tr><th> <!-- 全选框和反选按钮 --> <input type="checkbox" onclick="selectAll2()"/> <input type="button" value="反选" onclick="selectInvert()"/> </th> <th>编号</th> <th class="th1">分类名称</th> <th class="th1">分类描述</th> <th class="th1">操作</th> </tr> <tr> <td class="td2"> <input type="checkbox" name="select"/> </td> <td align="center">1</td> <td align="center">手机数码</td> <td align="center">手机数码</td> <td align="center"> <button>修改</button> <button>删除</button> </td> </tr> <tr> <td class="td2"> <input type="checkbox" name="select"/> </td> <td align="center">3</td> <td align="center">电脑办公</td> <td align="center">电脑办公</td> <td align="center"><button>修改</button> <button>删除</button> </td> </tr> <tr> <td class="td2"> <input type="checkbox" name="select"/> </td> <td align="center">4</td> <td align="center">手机数码</td> <td align="center">手机数码</td> <td align="center"><button>修改</button> <button>删除</button> </td> </tr> <tr> <td class="td2"> <input type="checkbox" name="select" /> </td> <td align="center">2</td> <td align="center">电脑办公</td> <td align="center">电脑办公</td> <td align="center"><button>修改</button> <button>删除</button> </td> </tr> </table> </body> <!-- js部分：使用jquery --> <script src="jquery-3.4.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 反选功能 */ function selectInvert() { var checkbox = $("input[name='select']"); checkbox.each(function() { var status = !$(this).prop("checked"); $(this).prop("checked", status); })} /* 全选和全不选功能*/ function selectAll2() { var checkboxes = $("input[name='select']"); var checked = false; // 遍历每个选择框，检查是否有至少一个未选中的 $.each(checkboxes, function(i, checkbox) { if (!$(checkbox).prop('checked')) { checked = true; return false; // 退出循环 } }); // 根据 checked 的值对所有选择框进行选中或取消选中操作 checkboxes.prop('checked', checked); } </script> </html>
