JS实现checkbox全选反选

需求:

1. 点击全选框,所有的子选项全部选中;再次点击,所有的子选项全部取消选中状态。

2. 当所有的子选项全部选中时,全选框状态改为选中;子选项有一个没有选中,全选框不选中。

3. 点击反选按钮,所有的子选项改变选中状态。

HTML结构:

  <div class="wrap">
      <table>
          <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
          </thead>
          <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>

          </tbody>
      </table>
      <input type="button" value="  反 选  " id="btn">
  </div>

JS逻辑:

 var j_tb = document.getElementById('j_tb');
     var inputs = j_tb.getElementsByTagName('input');
     // 1 全选
     // 1.1 获取父checkbox,注册点击事件
     var j_cbAll = document.getElementById('j_cbAll');
     j_cbAll.onclick = function () {
       // 1.2 找到所有子的checkbox,让这些checkbox的状态跟父checkbox保持一致
      
       for (var i = 0; i < inputs.length; i++) {
         var input = inputs[i];
         if (input.type === 'checkbox') {
          // 让子的checkbox的选中状态,和父checkbox的选中状态一致
           input.checked = this.checked;
         }
       }
     }
     
     // 2 当点击子的checkbox,如果所有的子的checkbox都被选中了,让父的checkbox也选中
     // 如果有一个子的checkbox没有被选中,父的checkbox也不被选中
     
     // 此处的循环,是遍历所有子的checkbox,注册点击事件
     for (var i = 0; i < inputs.length; i++) {
       var input = inputs[i];
       // 判断是否是checkbox
       if (input.type !== 'checkbox') {
        // 结束当前循环,继续下一次循环
         continue;
       }
       // 给子的checkbox注册点击事件
       input.onclick = function () {
         checkAllCheckBox();
       }
     }
     

     // 判断父的checkbox的状态 封装成函数
     function checkAllCheckBox() {
       // 假设所有的子的checkbox都被选中了
         var isAllChecked = true;
         // 判断是否所有的子的checkbox都被选中了
         for (var i = 0; i < inputs.length; i++) {
           var input = inputs[i];
           if (input.type !== 'checkbox') {
             continue;
           }
           // 判断当前的所有checkbox是否都被选中
           if (!input.checked) {
             isAllChecked = false;
           }
         }
         // 设置父的checkbox的状态
         j_cbAll.checked = isAllChecked;
     }

     // 3 反选
     // 3.1 给反选按钮注册点击事件
     var btn = document.getElementById('btn');
     btn.onclick = function () {
        // 3.2 找到所有的子的checkbox,让其反选
        for (var i = 0; i < inputs.length; i++) {
          var input = inputs[i];
          // 判断是否是checkbox
          if (input.type !== 'checkbox') {
            continue;
          }
          // 让子的checkbox反选
          input.checked = !input.checked;
          // 设置父的checkbox的状态
          checkAllCheckBox();
        }
     }

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值