全选全不选js代码实现

最新推荐文章于 2022-12-13 22:34:38 发布

A-linWeb

最新推荐文章于 2022-12-13 22:34:38 发布

阅读量337

点赞数 1

文章标签： js html5 es6 javascript

本文链接：https://blog.csdn.net/qq_48046110/article/details/109890040

版权

<!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>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    li {
        list-style: none;
    }

    #box1 {
        width: 500px;
        margin: 20px 0 0 10px;
    }

    #box1 h1 {
        font-size: 35px;
    }

    #box1 input,
    #box2 input,
    #box3 input,
    #box4 input {
        margin: 5px 8px 5px 5px;
    }

    #box2,
    #box3,
    #box4 {
        margin: 20px 0 0 50px;
    }

    #box2 h2,
    #box3 h2,
    #box4 h2 {
        font-size: 25px;
        margin-top: 20px;
    }

    #box2 ul,
    #box3 ul,
    #box4 ul {
        margin-top: 15px;
    }

    #box2 ul li,
    #box3 ul li,
    #box4 ul li {
        font-size: 17px;
    }
</style>

<body>
    <div id="box1">
        <h1><input id="quanXuan" type="checkbox" />全选</h1>
    </div>
    <div id="wrap">
        <div id="box2">
            <h2><input class="input" id="haiEr" type="checkbox" />海尔</h2>
            <ul class="first">
                <li><input type="checkbox" data-id="0" />空调</li>
                <li><input type="checkbox" data-id="0" />电视</li>
                <li><input type="checkbox" data-id="0" />洗衣机</li>
                <li><input type="checkbox" data-id="0" />冰箱</li>
            </ul>
        </div>
        <div id="box3">
            <h2><input class="input" id="huaWei" type="checkbox" />华为</h2>
            <ul class="second">
                <li><input type="checkbox" data-id="1" />空调</li>
                <li><input type="checkbox" data-id="1" />电视</li>
                <li><input type="checkbox" data-id="1" />洗衣机</li>
                <li><input type="checkbox" data-id="1" />冰箱</li>
            </ul>
        </div>
        <div id="box4">
            <h2><input class="input" id="meiDi" type="checkbox" />美的</h2>
            <ul class="third">
                <li><input type="checkbox" data-id="2" />空调</li>
                <li><input type="checkbox" data-id="2" />电视</li>
                <li><input type="checkbox" data-id="2" />洗衣机</li>
                <li><input type="checkbox" data-id="2" />冰箱</li>
            </ul>
        </div>
    </div>

    <script>
        var allcheck = document.querySelector("#quanXuan");//全选
        var singlechecks = document.querySelectorAll(".input");//单个全选框
        var inputs = document.querySelectorAll("input");//所有选择框
        
        var checks = document.querySelectorAll("#wrap input");


        var uls = document.querySelectorAll('ul')
        var lis = document.querySelectorAll("li");

        // 全选 全不选
        allcheck.addEventListener("click", function () {
            inputs.forEach((v) => {
                v.checked = this.checked;
            });
        });

        // 单个
        singlechecks.forEach((v, i) => {
            v.addEventListener("click", function () {
                var childs = uls[i].children
                Array.from(childs).forEach((v) => {
                    v.children[0].checked = this.checked
                    var checkedInputs = document.querySelectorAll("#wrap input:checked");//所有选中的选择框
                    allcheck.checked = checkedInputs.length === checks.length
                })
            });
        });


        lis.forEach(v => {
            v.addEventListener('click',function(){
                // console.log(v.parentElement.querySelectorAll('input'));
                var all = v.parentElement.previousElementSibling.children[0]
                // console.log(all);
                var singles = v.parentElement.querySelectorAll('input')
                var singleChecks = v.parentElement.querySelectorAll('input:checked')
                all.checked = singleChecks.length === singles.length
                
                var checkedInputs = document.querySelectorAll("#wrap input:checked");//所有选中的选择框
                allcheck.checked = checkedInputs.length === checks.length
            })
        })

    </script>
</body>
<ml>

A-linWeb

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
全选全不选js代码实现

<!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><style> * {
复制链接

扫一扫