js实现简单的全选和反选

avatar 2017年08月24日17:20:32 1 2511 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
js实现简单的全选和反选，一般都用得上。代码很简单，就这一小段。
  1. function DoCheck() {
  2.     var ch = document.getElementsByName("ids");
  3.     if (document.getElementById("allSelect").checked == true) {
  4.         for (var i = 0; i < ch.length; i++) {
  5.             ch[i].checked = true;
  6.         }
  7.     } else {
  8.         for (var i = 0; i < ch.length; i++) {
  9.             ch[i].checked = false;
  10.         }
  11.     }
  12. }

顺便把完整的测试代码贴出来
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>全选和反选演示</title>
  7.     <script type="text/javascript">
  8.         function DoCheck() {
  9.             var ch = document.getElementsByName("ids");
  10.             if (document.getElementById("allSelect").checked == true) {
  11.                 for (var i = 0; i < ch.length; i++) {
  12.                     ch[i].checked = true;
  13.                 }
  14.             } else {
  15.                 for (var i = 0; i < ch.length; i++) {
  16.                     ch[i].checked = false;
  17.                 }
  18.             }
  19.         }
  20.     </script>
  21. </head>
  23. <body>
  24.     <table border="1px solid #ccc">
  25.         <tr>
  26.             <td>
  27.                 <input type="checkbox" id="allSelect" onclick="javascript:DoCheck()">
  28.             </td>
  29.             <td>姓名</td>
  30.             <td>性别</td>
  31.             <td>年龄</td>
  32.             <td>职业</td>
  33.         </tr>
  34.         <tr>
  35.             <td>
  36.                 <input type="checkbox" name="ids">
  37.             </td>
  38.             <td>李白</td>
  39.             <td>男</td>
  40.             <td>28</td>
  41.             <td>诗人</td>
  42.         </tr>
  43.         <tr>
  44.             <td>
  45.                 <input type="checkbox" name="ids">
  46.             </td>
  47.             <td>周瑜</td>
  48.             <td>男</td>
  49.             <td>19</td>
  50.             <td>智将</td>
  51.         </tr>
  52.         <tr>
  53.             <td>
  54.                 <input type="checkbox" name="ids">
  55.             </td>
  56.             <td>杨玉环</td>
  57.             <td>女</td>
  58.             <td>25</td>
  59.             <td>贵妃</td>
  60.         </tr>
  62.     </table>
  64. </body>
  66. </html>



本文链接：https://liuyanzhao.com/6042.html
历史上的今天
八月
24日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0