深圳市金黑网络技术有限公司:主营高端网站建设,网络推广,商城/系统开发,公众号小程序app开发等业务。
业务需求:
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>

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

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

推荐给好友: [复制链接]
推荐文章
回复

使用道具 举报

相关文章

发布主题
  • 网站建设

    高端网站设计制作

  • 模板制作

    仿站/效果图转模板

  • 网络推广

    关键词优化/全网推广

  • 技术维护

    网站维护/异常处理

  • 小程序开发

    公众号/小程序开发

  • 系统开发

    商城系统/各类系统开发

  • 定制开发流程

    业务咨询 | 提交需求 | 报价报时 | 付款开工

    联系我们
  • 今日更新:0 昨日更新:0
  • 会员总数:462 模板总数:9876
全国最大PB建站模板下载平台
在线技术QQ

515138

周一至周日9:00-23:00

如有侵权请联系我们

515138@qq.com 在线QQ咨询

微信扫码关注我们