<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>hwork</title>
<style>
th{
text-align: center;
}
td{
text-align: center;
}
#b2{
margin-left: 25px;
}
#b3{
margin-left:25px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>job</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>xiaodongbei</td>
<td>actor</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>xiaoqiang</td>
<td>xxactor</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>shege</td>
<td>director</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="all">
<input type="button" id="b2" value="anti-all">
<input type="button" id="b3" value="cancel">
<script src="jquery-3.4.1.js"></script>
<script>
//点全选，checkbox都选中
//1.找checkbox
//2.全选，prop（'checked'，true）
$('#b1').click(
function () {
$(':checkbox').prop('checked',true);
}
);
//点取消，checkbox都步选中
//1.找checkbox
//2.全选，prop（'checked'，false）
$('#b3').click(
function () {
$(':checkbox').prop('checked',false);
}
);
//反选
//1.找到所有的checkbox
//2.若已选中，则取消选中；若未选中的，则变为选中
$('#b2').click(
function () {
//找到所有的checkbox，存入变量
var anticlick = $(':checkbox');
for (var i = 0; i < anticlick.length; i++) {
//将每个checkbox包装为jquery对象
var $anticlick = $(anticlick[i]);
if ($anticlick.prop('checked')) {
$anticlick.prop('checked', false);
} else {
$anticlick.prop('checked', true);
}
}
}
);
</script>
</body>
</html>