预览
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>郭德纲</td>
<td>开车，京剧</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>岳云鹏</td>
<td>做饭</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>于谦</td>
<td>喝酒，抽烟，烫头</td>
</tr>
</tbody>
</table>
<script>
$("#all").click(function () {
$(":checkbox").prop('checked', true);
});
$("#cancel").on("click", function () {
$(":checkbox").prop('checked', false);
});
$("#reverse").click(function () {
var $checkbox = $(":checkbox");
for (var i=0;i<$checkbox.length;i++){
var status = $($checkbox[i]).prop('checked');
$($checkbox[i]).prop('checked', !status);
}
})
</script>
</body>
</html>