原生js 复选框全选案例

注 : 本文章主要写功能

 

代码示例 : 

<body>
        <input type="checkbox" id="che" /><br>
        <input type="checkbox" id="" />
        <input type="checkbox" id="" />
        <input type="checkbox" id="" />
        <input type="checkbox" id="" />
        
        
        
        <script type="text/javascript">
            let che = document.getElementById('che');
            let ches = document.querySelectorAll('input');
            che.onclick = function () {
                for (let i = 1; i < ches.length; i++) {
                    ches[i].checked = this.checked;
                }
            }
            
            for (let i = 1; i < ches.length; i++) {
                ches[i].onclick = function () {
                    let flag = true;
                    for (let i = 1; i < ches.length; i++) {
                        if (!ches[i].checked) {
                            flag = false
                        }
                    }
                    che.checked = flag
                }
            }
        </script>
    </body>

复制代码直接可用

posted @ 2022-04-11 09:03  会前端的洋  阅读(118)  评论(0)    收藏  举报