当前位置：网站首页>Select all select none JS code implementation

Select all select none JS code implementation

2022-06-13 06:38:00 【A-linWeb】
<!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" /> Future generations </h1>
    </div>
    <div id="wrap">
        <div id="box2">
            <h2><input class="input" id="haiEr" type="checkbox" /> haier </h2>
            <ul class="first">
                <li><input type="checkbox" data-id="0" /> Air conditioner </li>
                <li><input type="checkbox" data-id="0" /> TV </li>
                <li><input type="checkbox" data-id="0" /> Washing machine </li>
                <li><input type="checkbox" data-id="0" /> The refrigerator </li>
            </ul>
        </div>
        <div id="box3">
            <h2><input class="input" id="huaWei" type="checkbox" /> Huawei </h2>
            <ul class="second">
                <li><input type="checkbox" data-id="1" /> Air conditioner </li>
                <li><input type="checkbox" data-id="1" /> TV </li>
                <li><input type="checkbox" data-id="1" /> Washing machine </li>
                <li><input type="checkbox" data-id="1" /> The refrigerator </li>
            </ul>
        </div>
        <div id="box4">
            <h2><input class="input" id="meiDi" type="checkbox" /> beauty </h2>
            <ul class="third">
                <li><input type="checkbox" data-id="2" /> Air conditioner </li>
                <li><input type="checkbox" data-id="2" /> TV </li>
                <li><input type="checkbox" data-id="2" /> Washing machine </li>
                <li><input type="checkbox" data-id="2" /> The refrigerator </li>
            </ul>
        </div>
    </div>

    <script>
        var allcheck = document.querySelector("#quanXuan");// Future generations 
        var singlechecks = document.querySelectorAll(".input");// Single select all box 
        var inputs = document.querySelectorAll("input");// All selection boxes 
        
        var checks = document.querySelectorAll("#wrap input");


        var uls = document.querySelectorAll('ul')
        var lis = document.querySelectorAll("li"); //  Future generations   Totally unselected  allcheck.addEventListener("click", function () {
    
            inputs.forEach((v) => {
    
                v.checked = this.checked;
            });
        }); //  Single  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");// All selected selection boxes 
                    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");// All selected selection boxes 
                allcheck.checked = checkedInputs.length === checks.length
            })
        })

    </script>
</body>
<ml>
原网站
版权声明
本文为[A-linWeb]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202270552590592.html
当前位置：网站首页>Select all select none JS code implementation

Select all select none JS code implementation

边栏推荐

猜你喜欢

随机推荐
