一、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
<thead>
<tr>
<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 src="jquery-3.4.1.js" type="text/javascript"></script>
<script>
// 点击全选按钮 选中所有的checkbox
// DOM绑定事件方法
// $("#all")[0].onclick = function(){}
// jQuery绑定事件方法
$("#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>
二、运行效果
![在这里插入图片描述]()
