JQuery實現全選/全不選
阿新 • • 發佈：2021-03-09
當點選全選時，獲取全選表單項的checked屬性值flag為true即被選中然後給所有屬性名name='one'表單項新增被選中的屬性checked="true"
給所有單選框繫結點選事件，當點選某個單選框取消被選中時，這時候需要遍歷所有單選框當找到任意一個沒被選中的單選框時就修改全選的那個單選框的被選中狀態為false即checked=false,若是所有單選框的checked屬性都是true則修改全選的那個單選框為被選中狀態checked=true
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選</title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script> $(function() { /*當點選全選時，獲取全選表單項的checked屬性值flag為true即被選中 然後給所有屬性名name='one'表單項新增被選中的屬性checked="true" */ $("#all").click(function() { var flag = $(this).prop("checked"); console.log(flag); var oneList = $("input[name='one']"); for(var i = 0; i < oneList.length; i++) { $(oneList[i]).prop("checked", flag); } }); /*給所有單選框繫結點選事件，當點選某個單選框取消被選中時， *這時候需要遍歷所有單選框當找到任意一個沒被選中的單選框時 *就修改全選的那個單選框的被選中狀態為false即checked=false, *若是所有單選框的checked屬性都是true則修改全選的那個單選框為被選中狀態checked=true **/ $("input[name='one']").click(function() { var oneList = $("input[name='one']"); for(var i = 0; i < oneList.length; i++) { if(!$(oneList[i]).prop("checked")) { $("#all").prop("checked", false); return; } } $("#all").prop("checked", true); }); }); </script> </head> <body> <table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="160px"> <tr> <th>全選<input id="all" type="checkbox" /></th> <th>序號</th> <th>名稱</th> <th>單價</th> <th>數量</th> <th>總計</th> </tr> <tr> <td><input name="one" type="checkbox" /></td> <td>1</td> <td>小熊餅乾1</td> <td>￥125</td> <td>1</td> <td>￥125</td> </tr> <tr> <td><input name="one" type="checkbox" /></td> <td>2</td> <td>小熊餅乾2</td> <td>￥125</td> <td>1</td> <td>￥125</td> </tr> <tr> <td><input name="one" type="checkbox" /></td> <td>3</td> <td>小熊餅乾3</td> <td>￥125</td> <td>1</td> <td>￥125</td> </tr> </table> </body> </html>