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=" 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标签增加固有属性checked 46 // $(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>