標籤：var rip tle 執行 pos 標籤 jquery 反選 check
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實現全選、反選和取消功能
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
