1、在系統後臺進行人員管理時，進行批量刪除，使用jq完成全選和全不選 步驟分析： 第一步：引入jquery文件 第二步：書寫頁面載入函數 第三步：為上面的覆選框綁定單擊事件 第四步：將下麵所有的覆選框的選中狀態設置成跟上面的一致！ 2、具體代碼實現： 註意：attr在jquery1.11版本不適用， ...
1、在系統後臺進行人員管理時，進行批量刪除，使用jq完成全選和全不選
步驟分析：
第一步：引入jquery文件
第二步：書寫頁面載入函數
第三步：為上面的覆選框綁定單擊事件
第四步：將下麵所有的覆選框的選中狀態設置成跟上面的一致！
2、具體代碼實現：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成覆選框的全選和全不選</title> 6 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 7 <script> 8 $(function(){ 9 $("#select").click(function(){ 10 //獲取下麵所有的覆選框並將其選中狀態設置跟編碼的前端覆選框保持一致 11 //attr的方法與JQ的版本有關，在1.8.3及以下有用 12 //$(".selectOne").attr("checked",this.checked); 13 $(".selectOne").prop("checked",this.checked); 14 }); 15 }); 16 </script> 17 </head> 18 <body> 19 <table border="1" width="500" height="50" align="center" id="tbl" > 20 <thead> 21 <tr> 22 <td colspan="4"> 23 <input type="button" value="添加" /> 24 <input type="button" value="刪除" /> 25 </td> 26 </tr> 27 <tr> 28 <th><input type="checkbox" id="select"></th> 29 <th>編號</th> 30 <th>姓名</th> 31 <th>年齡</th> 32 </tr> 33 </thead> 34 <tbody> 35 <tr > 36 <td><input type="checkbox" class="selectOne"/></td> 37 <td>1</td> 38 <td>張三</td> 39 <td>22</td> 40 </tr> 41 <tr > 42 <td><input type="checkbox" class="selectOne"/></td> 43 <td>2</td> 44 <td>李四</td> 45 <td>25</td> 46 </tr> 47 <tr > 48 <td><input type="checkbox" class="selectOne"/></td> 49 <td>3</td> 50 <td>王五</td> 51 <td>27</td> 52 </tr> 53 <tr > 54 <td><input type="checkbox" class="selectOne"/></td> 55 <td>4</td> 56 <td>趙六</td> 57 <td>29</td> 58 </tr> 59 <tr > 60 <td><input type="checkbox" class="selectOne"/></td> 61 <td>5</td> 62 <td>田七</td> 63 <td>30</td> 64 </tr> 65 <tr > 66 <td><input type="checkbox" class="selectOne"/></td> 67 <td>6</td> 68 <td>汾九</td> 69 <td>20</td> 70 </tr> 71 </tbody> 72 </table> 73 </body> 74 </html>
註意：attr在jquery1.11版本不適用，採用prop()來替代(在各個版本都適用)。
