jQuery學習（3） 關於全選按鈕的實現
阿新 • • 發佈：2018-12-22
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> table { background-color: #f0f0f0; /*字型居中*/ text-align: center; /*清除間距*/ border-collapse: collapse; border-spacing: 0; border: 1px solid #404060; } thead { background-color: #1292CD; color: #fff; } th, td { padding: 10px; border: 2px solid #fff; width: 200px; } tbody td { padding: 10px; } </style> <script type="text/javascript" src="../js/jquery-3.2.1.js" ></script> <script> $(function(){ $("#qx_check").click(function(){ //點選全選 //tbody中複選框的狀態和全選的狀態一樣 // 當前元素.find("選擇器") -- - > 從當前元素中找某個或者是某些元素 $("tbody").find("input").prop("checked",$(this).prop("checked")); }); //tbody中的複選框全部選中時，全選框顯示選中 //為每一個tbody複選框註冊點選事件 $("tbody").find("input").click(function(){ //先獲取所有tbody中input複選框的個數 var tb_length=$("tbody").find("input").length; //獲取選中的複選框的個數 //tbody :checked -------------tbody中被選中的 var xz_length=$("tbody :checked").length; //如果選中得到複選框的個數和獲取得到所有的複選框的個數相同，就讓全選按鈕選中 if (xz_length==tb_length) { $("#qx_check").prop("checked",true); }else{ $("#qx_check").prop("checked",false); } }); }); </script> <body> <div> <table> <thead> <tr> <th> <input type="checkbox" name="qx_check" id="qx_check" />全選 </th> <th>學 院</th> <th>課 程</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td>前端學院</td> <td>jQuery</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Java學院</td> <td>Java</td> </tr> <tr> <td><input type="checkbox" /></td> <td>人工智慧</td> <td>python</td> </tr> <tr> <td><input type="checkbox" /></td> <td>美工</td> <td>UI</td> </tr> </tbody> </table> </div> </body> </html>
