复选框全选与反选

木木木和小琳琳

于 2023-03-04 22:45:49 发布

阅读量262

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_19820589/article/details/129340584

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="" id="" class="check">全选/取消全选
        <br>
        <input type="checkbox" name="num" id="" class="ball_checkbox">1<br>
        <input type="checkbox" name="num" id="" class="ball_checkbox">2<br>
        <input type="checkbox" name="num" id="" class="ball_checkbox">3<br>
        <input type="checkbox" name="num" id="" class="ball_checkbox">4<br>
        
        <script type="text/javascript">
            let delete_checkbox = document.getElementsByClassName('check')[0];
            let arr = true;
            delete_checkbox.addEventListener('click', function() {
            
                let num = document.getElementsByName('num');
                for (let i = 0; i < num.length; i++) {
                    num[i].checked = this.checked;
                }
            })
        </script>
    </body>
</html>

给下面所以复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，上面全选就不选中；