开发者社区云计算文章正文

复选框全选与反选

2023-07-17 33

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 复选框全选与反选

<!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>