单击事件 - 全选反选

2021-09-15 14:07:23 阅读：166 来源： 互联网

1.实现

1.1全选

点击全选复选框 - > 子复选框全选+文字变为取消 - > 再次点击取消复选框 - > 子复选框全部取消选中+文字变为全选

1.2反选

所有子复选框被选中 - > 全选复选框则自动选中+文字变为取消 - > 任意一子复选框未选中 - > 全选复选框取消选中+文字变为全选

<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
        //需求：点击全选复选框 修改相应文字 小复选框跟随全选框
        //获取标签  
        let allCheck = document.querySelector('#checkAll')
        let allSpan = document.querySelector('.all')
        let ckSpan = document.querySelectorAll('.ck')
      
        //复选框点击事件   
        allCheck.addEventListener('click',function() {
            //判断复选框状态 修改相应文字
            if(allCheck.checked === true) {
                    allSpan.innerHTML = '取消'
            } else {
                allSpan.innerHTML = '全选'
            }
            //把全选复选框选中状态（true、false）赋值给每个小选框的check属性上
            for(let i = 0; i < ckSpan.length; i++) {
                ckSpan[i].checked = allCheck.checked
        }
        })

        // 反选
        // 每个小选框 绑定点击事件
        for(let i = 0; i < ckSpan.length; i++) {
            ckSpan[i].addEventListener('click',function() {
                // 判断所有小选框是否全部选中
                // （核心）找到没选中的
                let flag = true
                // 遍历伪数组看有没有没选中的
                for(let j = 0; j < ckSpan.length; j++) {
                    if(ckSpan[j].checked === false) {
                        flag = false //如果有一个小选框没选中 flag标记为false 
                    }
                }
                // 判断后的最终结论 flag赋值给全选框状态
                allCheck.checked = flag

                // 文字判断
                if(allCheck.checked === true) {
                        allSpan.innerHTML = '取消'
                } else {
                    allSpan.innerHTML = '全选'
                }
            })
        }
        
      
      

      
  </script>
</body>

</html>

标签：单击,ckSpan,反选,复选框,全选,选中,let,allCheck
来源： https://blog.csdn.net/qq_45579661/article/details/120307084

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

单击事件 - 全选反选