<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ实现正、反选</title>
</head>
<body>
<table border="1px" style="width: 200px;margin-bottom: 10px">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Qimi</td>
<td>女</td>
</tr>
</tbody>
</table>
<input type="button" value="全选" id="i1" class="c1">
<input type="button" value="反选" id="i2" class="c1">
<input type="button" value="取消" id="i3">
<script src="jquery-3.2.1.js"></script>
<script>
// <!-----------------------------------全选------------------------------------>
var $in_1 = $("#i1");
//用第一种循环的方式全部选中,each的循环体不用加索引取值
// $in_1.on("click",function () {
// var $cheele = $(":checkbox");
// $cheele.each(function () {
// //为input标签增加固有属性checked
// $(this).prop("checked",true);
// })
// });
//用第二种循环的方式全部选中
// $in_1.click("click",function () {
// var $cheele = $(":checkbox");
// $.each($cheele,function () {
// $(this).prop("checked",true);
// })
// });
//另一种全选的方法
//要执行的语句不能直接你跟在","之后！！！
$in_1.on("click",function () {
$(":checkbox").prop("checked",true);
});
//-----------------------------------------取消--------------------------------------------------
var $in_2 = $("#i3");
$in_2.on("click",function () {
$(":checkbox").prop("checked",false);
});
//-----------------------------------------反选--------------------------------------------------
var $in_3 = $("#i2");
$in_3.on("click",function () {
$(":checkbox").each(function () {
$(this).prop("checked",!$(this).prop("checked"));
})
});
</script>
</body>
</html>