html的checkbox標籤全選與取消全選
阿新 • • 發佈：2019-01-28
1.html程式碼：
<body> <table border="1"> <tr> <th><input type="checkbox" onclick="swapCheck()" /></th> <th>衣服</th> <th>褲子</th> </tr> <tr> <td><input type="checkbox" /></td> <td>$20</td> <td>$100</td> </tr> <tr> <td><input type="checkbox" /></td> <td>$30</td> <td>$150</td> </tr> </table> </body>
2.jQuery程式碼（功能實現）
<script type="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> //checkbox 全選/取消全選 var isCheckAll = false; function swapCheck() { if (isCheckAll) { $("input[type='checkbox']").each(function() { this.checked = false; }); isCheckAll = false; } else { $("input[type='checkbox']").each(function() { this.checked = true; }); isCheckAll = true; } } </script>
注：<script type="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 這段程式碼不可缺失 否則無法實現效果。
3.效果圖
