首页 > 其他分享> > 单击事件 - 全选反选

单击事件 - 全选反选

2021-09-15 14:07:23 作者：互联网

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