html的checkbox标签全选与取消全选

admin
admin
admin
5450
文章
12
评论
建站教程评论5831字数 1193阅读模式

1.html代码：

  1. <body>  
  2.     <table border="1">  
  3.         <tr>  
  4.             <th><input type="checkbox" onclick="swapCheck()" /></th>  
  5.             <th>衣服</th>  
  6.             <th>裤子</th>  
  7.         </tr>  
  8.         <tr>  
  9.             <td><input type="checkbox" /></td>  
  10.             <td>$20</td>  
  11.             <td>$100</td>  
  12.         </tr>  
  13.         <tr>  
  14.             <td><input type="checkbox" /></td>  
  15.             <td>$30</td>  
  16.             <td>$150</td>  
  17.         </tr>  
  18.     </table>  
  19. </body>  

2.jQuery代码（功能实现）

  1. <script type="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>  
  2. <script type="text/javascript">  
  3.     //checkbox 全选/取消全选  
  4.     var isCheckAll = false;  
  5.     function swapCheck() {  
  6.         if (isCheckAll) {  
  7.             $("input[type='checkbox']").each(function() {  
  8.                 this.checked = false;  
  9.             });  
  10.             isCheckAll = false;  
  11.         } else {  
  12.             $("input[type='checkbox']").each(function() {  
  13.                 this.checked = true;  
  14.             });  
  15.             isCheckAll = true;  
  16.         }  
  17.     }  
  18. </script>  
  1. 注：<script type="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 这段代码不可缺失 否则无法实现效果  

版权声明：文章图片资源来源于网络,如有侵权，请留言删除!!!
admin
  • 本文由 发表于 2021年2月2日 20:17:57
  • 转载请务必保留本文链接：https://www.58pxe.com/7128.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: