设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
自丢网»社区论坛 › 建站程序/IT教程 › JavaScript教程 › js表单全选取消全选案例

js表单全选取消全选案例

[复制链接]
查看2672 | 回复0 | 2020-2-14 09:13 | 显示全部楼层 |阅读模式
业务需求:
1.点击上面全选复选框，下面所有的复选框都选中(全选)
2.再次点击全选复选框，下面所有的复选框都不中选(取消全选)
3.如果下面复选框全部选中，上面全选按钮就自动选中
4.如果下面复选框有一个没有选中，上面全选按钮就不选中
5.所有复选框一开始默认都没选中状态

js表单全选取消全选案例

js表单全选取消全选案例
js案例代码：
  1. <body>
  2.     <div class="wrap">
  3.         <table>
  4.             <thead>
  5.                 <tr>
  6.                     <th>
  7.                         <input type="checkbox" id="j_cbAll" />
  8.                     </th>
  9.                     <th>商品</th>
  10.                     <th>价钱</th>
  11.                 </tr>
  12.             </thead>
  13.             <tbody id="j_tb">
  14.                 <tr>
  15.                     <td>
  16.                         <input type="checkbox" />
  17.                     </td>
  18.                     <td>iPhone8</td>
  19.                     <td>8000</td>
  20.                 </tr>
  21.                 <tr>
  22.                     <td>
  23.                         <input type="checkbox" />
  24.                     </td>
  25.                     <td>iPad Pro</td>
  26.                     <td>5000</td>
  27.                 </tr>
  28.                 <tr>
  29.                     <td>
  30.                         <input type="checkbox" />
  31.                     </td>
  32.                     <td>iPad Air</td>
  33.                     <td>2000</td>
  34.                 </tr>
  35.                 <tr>
  36.                     <td>
  37.                         <input type="checkbox" />
  38.                     </td>
  39.                     <td>Apple Watch</td>
  40.                     <td>2000</td>
  41.                 </tr>

  43.             </tbody>
  44.         </table>
  45.     </div>
  46.     <script>
  47.         var j_cbAll = document.querySelector('#j_cbAll');
  48.         var ipts = document.querySelector('#j_tb').querySelectorAll('input')
  49.         j_cbAll.onclick = function() {
  50.             for (var i = 0; i < ipts.length; i++) {
  51.                 ipts[i].checked = this.checked;
  52.             }
  53.         }

  55.         for (var i = 0; i < ipts.length; i++) {
  56.             ipts[i].onclick = function() {
  57.                 flag = true;
  58.                 for (i = 0; i < ipts.length; i++) {
  59.                     if (!ipts[i].checked) {
  60.                         flag = false;
  61.                         break;
  62.                     }
  63.                 }
  64.                 j_cbAll.checked = flag;
  65.             }
  66.         }
  67.     </script>
  68. </body>
复制代码
break在这里提高效率。

javascript教程, DOM教程, js教程

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

admin

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-30
回复楼主 返回列表