1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>JQ实现正、反选</title> 6 </head> 7 <body> 8 ????<table ?border="1px" style="width: 200px;margin-bottom: 10px"> 9 ????????<thead>10 ????????????<tr>11 ????????????????<th>#</th>12 ????????????????<th>姓名</th>13 ????????????????<th>性别</th>14 ????????????</tr>15 ????????</thead>16 ????????<tbody>17 ????????????<tr>18 ????????????????<td><input type="checkbox"></td>19 ????????????????<td>Alex</td>20 ????????????????<td>女</td>21 ????????????</tr>22 ????????????<tr>23 ????????????????<td><input type="checkbox"></td>24 ????????????????<td>Egon</td>25 ????????????????<td>女</td>26 ????????????</tr>27 ????????????<tr>28 ????????????????<td><input type="checkbox"></td>29 ????????????????<td>Qimi</td>30 ????????????????<td>女</td>31 ????????????</tr>32 ????????</tbody>33 ????</table>34 ????<input type="button" ?value="全选" id="i1" class="c1">35 ????<input type="button" value="反选" id="i2" class="c1">36 ????<input type="button" value="取消" id="i3">37 ????<script src="jquery-3.2.1.js"></script>38 ????<script>39 ????????// <!-----------------------------------全选------------------------------------>40 ????????var $in_1 = $("#i1");41 ????????//用第一种循环的方式全部选中,each的循环体不用加索引取值42 ????????// $in_1.on("click",function () {43 ????????// ????var $cheele = $(":checkbox");44 ????????// ????$cheele.each(function () {45 ????????// ????????//为input标签增加固有属性checked46 ????????// ????????$(this).prop("checked",true);47 ????????// ????})48 ????????// });49 ????????//用第二种循环的方式全部选中50 ????????// $in_1.click("click",function () {51 ????????// ????var $cheele = $(":checkbox");52 ????????// ????$.each($cheele,function () {53 ????????// ????????$(this).prop("checked",true);54 ????????// ????})55 ????????// });56 ????????//另一种全选的方法57 ????????????//要执行的语句不能直接你跟在","之后！！！58 ????????$in_1.on("click",function () {59 ????????????$(":checkbox").prop("checked",true);60 ????????});61 ????????//-----------------------------------------取消--------------------------------------------------62 ????????var $in_2 = $("#i3");63 ????????$in_2.on("click",function () {64 ????????????$(":checkbox").prop("checked",false);65 ????????});66 ????????//-----------------------------------------反选--------------------------------------------------67 ????????var $in_3 = $("#i2");68 ????????$in_3.on("click",function () {69 ????????????$(":checkbox").each(function () {70 ????????????????$(this).prop("checked",!$(this).prop("checked"));71 ????????????})72 ????????});73 ????</script>74 </body>75 </html>JQuery实现全选、反选和取消功能
原文地址：https://www.cnblogs.com/liuyinzhou/p/8179021.html