jQuery學習(五)——使用JQ完成復選框的全選和全不選
阿新 • • 發佈：2017-08-25
function () thead java round 綁定 使用 table check
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()來替代(在各個版本都適用)。
jQuery學習(五)——使用JQ完成復選框的全選和全不選