526互联

购物车 复选框和反选 全部选择案例

发布时间 2023-11-02 15:47:18作者: mingBolg
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>购物车复选框的选中 反选的案例</title>
    </head>
    <body>
        All <input class="all" name="Checkbox" type="checkbox">
        <ul>
            <div class="checkbox-list">
                <input name="Checkbox" type="checkbox" >
                <input name="Checkbox" type="checkbox" >
                <input name="Checkbox" type="checkbox">
            </div>
            
        </ul>
        
        <script>
            let all = document.querySelector('.all')
            
            let every = document.querySelectorAll('.checkbox-list input')
            console.log(every)
            //大复选框选中  小的全部选中
            all.addEventListener('click',function(){
                
                for (let i = 0; i < every.length; i++) {
                    
                    every[i].checked = this.checked
                }
            })
             
            //下面小的 如果全选 那么 大复选框也选中
            for (let i = 0; i < every.length; i++) {
                every[i].addEventListener('click',function(){
                    for (var j = 0; j < every.length; i++) {
                        if(every[j].checked != true){
                            all.checked = false
                            return true
                        }else{
                            all.checked = true
                            return true
                        }
                    }
                })
            }
             
        </script>
        
    </body>
</html>