JQuery實現全選、反選和取消功能
阿新 • • 發佈：2018-01-03
oct put 執行 tab function src color gpo 不用
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標簽增加固有屬性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>
JQuery實現全選、反選和取消功能