JavaScript实现复选框全选或全取消操作

云言

3年前更新

04370

[c-alert type="info"]

这篇文章主要为大家详细介绍了JavaScript实现复选框全选或全取消操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

[/c-alert]

实现思路

1.点击全选/全不选：判断上面选择框是true还是false
true:下面列表checked都要是true （全选框是true，选择框列表也要是true）
false:下面列表checked都要是false（全选框是false，选择框列表也要是false）
总结：点击全选之后，无条件把全选框的checked赋值给每一个选择框列表

2.点击任何一个选择框列表：判断所有选择框是否都选中
都选中：上面全选框checked值修改为true
没有都选中：上面全选框checked值修改为false

代码

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

      table {
        border-collapse: collapse;
        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;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th><input type="checkbox" id="checkAll" />全选/全不选</th>
        <th>菜名</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>红烧肉</td>
        <td>隆江猪脚饭</td>
        <td>￥200</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>香酥排骨</td>
        <td>隆江猪脚饭</td>
        <td>￥998</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>北京烤鸭</td>
        <td>隆江猪脚饭</td>
        <td>￥88</td>
      </tr>
    </table>

    <script>
        //1.获取元素
        let checkAll = document.querySelector('#checkAll')
        let checkList = document.querySelectorAll('.check')

        //2.注册事件
        //2.1 点击全选/全不选
        checkAll.onclick = function(){
            // this : 上面全选框
            //3.判断上面全选框是true还是false
            for(let i = 0;i < checkList.length;i++){
                checkList[i].checked = this.checked
            }

            // if( this.checked ){
            //     for( let i = 0;i < checkList.length;i++){
            //         checkList[i].checked = this.checked
            //     }
            // }else{
            //     for( let i = 0;i < checkList.length;i++){
            //         checkList[i].checked = this.checked
            //     }
            // }
        }

        //2.2 点击下方每一个选择框
        for(let i = 0;i<checkList.length;i++){
            checkList[i].onclick = function(){
                //3.检查是否所有选择框全部选中

                //方式二：开关思想
                //(1)声明开关 ： 给默认值true,但是不确定是不是对的
                let allCheck = true
                //(2)检查开关
                for( let j = 0;j < checkList.length;j++){
                    if( !checkList[j].checked ){//判断checked是false
                        allCheck = false
                        break
                    }
                }
                console.log(allCheck)
                checkAll.checked = allCheck
            }
        }

        for(let i = 0;i<checkList.length;i++){
            checkList[i].onclick = function(){
                //3.检查是否所有选择框全部选中

                //方式一：累加思想
                //通过累加方式计算所有选中的数量， 判断 选中的数量 和 总数量  是否一致
                let sum = 0
                for(let j = 0;j<checkList.length;j++){
                    if( checkList[j].checked ){
                        sum++
                    }
                }
                console.log( sum )
                checkAll.checked = sum === checkList.length 
                // if( sum === checkList.length ){
                //     //全部选中
                //     checkAll.checked = true
                // }else{
                //     //没有选中选中
                //     checkAll.checked = false
                // }   
            }
        }

    
    </script>
  </body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END