综合使用前端三件套的一个小题目：
要求：
全选：选中上⾯的复选框，下⾯所有复选框设置为选中状态
全不选：取消选中⾯⽅的复选框，下⾯所有的复选框设置为未选状态
反选：点击反选按钮，下⽅选中的复选框设置为未选状态，下⽅未选中的复选框设置为选中状 态
效果图：
点击图中的全选框，没有选项被选中时，将选中所有选项；有选项被选中时，将取消所有选中选项； 点击图中的反选框，会反选未选中的选项
代码：
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>
