js 实现全选和反选（使用了click事件监听）

最新推荐文章于 2023-09-03 17:27:36 发布

@清风798

最新推荐文章于 2023-09-03 17:27:36 发布

阅读量373

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_69095153/article/details/132549825

版权

1. 获取DOM节点

 var checkBigBox = document.querySelector('.bigBox');
 var tbs = document.querySelector('.f').querySelectorAll('input');

2. 实现全选和反选功能

  // 全选和反选
        checkBigBox.addEventListener('click', function () { //利用事件监听
            for (var i = 0; i < tbs.length; i++) { //循环遍历table里面的复选框
                tbs[i].checked = this.checked  // 将每一个复选框的checked赋值全选框的checked 实现全选和反选
            }

        })

3. 实现下面复选框需要全部选中，上面全选才能选中功能

// 下面复选框需要全部选中， 上面全选才能选中做法
        for(var i=0;i<tbs.length;i++){
            tbs[i].addEventListener('click',function(){
                var flag = true //先定义flag为true
                for(var j=0;j<tbs.length;j++){ //循环遍历每一个复选框
                    if(!tbs[j].checked){ //如果有一个复选框没有被选中则将flag设为false
                        flag = false
                        break; //退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                checkBigBox.checked = flag  //最后将flag的值赋值给全选框的checked
            })
        }

4.总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <table border="1"  cellpadding="0"  cellspacing="0">
                <tr>
                    <th>
                        <input type="checkbox" class="bigBox" />
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
               <tbody class="f">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>小米12</td>
                    <td>￥5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>mate30</td>
                    <td>￥6000</td>
                </tr>
               </tbody>
        </table>
        <script>

        var checkBigBox = document.querySelector('.bigBox');
        var tbs = document.querySelector('.f').querySelectorAll('input');

        // 全选和反选
        checkBigBox.addEventListener('click', function () { //利用事件监听
            for (var i = 0; i < tbs.length; i++) { //循环遍历table里面的复选框
                tbs[i].checked = this.checked  // 将每一个复选框的checked赋值全选框的checked 实现全选和反选
            }

        })

        // 下面复选框需要全部选中， 上面全选才能选中做法
        for(var i=0;i<tbs.length;i++){
            tbs[i].addEventListener('click',function(){
                var flag = true //先定义flag为true
                for(var j=0;j<tbs.length;j++){ //循环遍历每一个复选框
                    if(!tbs[j].checked){ //如果有一个复选框没有被选中则将flag设为false
                        flag = false
                        break; //退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                checkBigBox.checked = flag  //最后将flag的值赋值给全选框的checked
            })
        }
        </script>
</body>
</html>