js实现全选功能

最新推荐文章于 2025-03-29 10:30:48 发布

zhaojianyin

最新推荐文章于 2025-03-29 10:30:48 发布

阅读量1.3w

点赞数 7

分类专栏： javascript 文章标签： javascript 全选

本文链接：https://blog.youkuaiyun.com/zhaojianyin/article/details/77494118

版权

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的全选功能案例。当点击“全选”复选框时，页面上所有名为“ckbx”的复选框都会被选中或取消选中。反之，当所有名为“ckbx”的复选框都被选中时，“全选”复选框也会被选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js全选练习</title>
<script type="text/javascript">
    window.onload = function() {
        var btn = document.getElementById("all");
        btn.onclick = function() {
            var flag = this.checked;
            var items = document.getElementsByName("ckbx");
            for (var i = 0; i < items.length; i++) {
                items[i].checked = flag;//将所有item的状态设为全选按钮的状态
            }
        }


        var items = document.getElementsByName("ckbx");
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function() {//对每个item设置点击
                var number = 0;//记录选中的个数
                for (var j = 0; j < items.length; j++) {
                    if (items[j].checked) {
                        number++;
                    }
                }
                document.getElementById("all").checked = (items.length == number);
            }
        }
    }
</script>
</head>
<body>
    功能描述：点击全选，全部选中，再次点击全部不选，ckbx全部选中全选也选中，有一个没选全选不选
    <br />
    <input type="checkbox" id="all" />全选/全不选
    <br />
    <input type="checkbox" name="ckbx" />读书
    <input type="checkbox" name="ckbx" />看报
    <input type="checkbox" name="ckbx" />游泳
    <input type="checkbox" name="ckbx" />写字
    <input type="checkbox" name="ckbx" />上课
</body>
</html>