用js实现点击一个复选框其它复选框也会被选中

psjasf1314

于 2022-04-12 14:08:25 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML js 文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/psjasf1314/article/details/124122507

这篇博客介绍了如何使用JavaScript实现点击一个复选框，其他所有复选框都会随之选中或取消选中的功能。通过监听onclick事件，动态更新复选框的状态，实现了这一交互效果。

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

内容描述：实现点击一个复选框其它复选框也全部选中，取消一个复选框其它也全部取消。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现全选</title>
    <script>
        //window.onload里面的函数会在页面加载之后执行
        window.onload = function () {
            var input0 = document.getElementById('input0');
            var oDiv = document.getElementById('div1');
            var oInput = oDiv.getElementsByTagName('input');
            input0.onclick = function () {
                if (input0.checked) {
                    for (var i = 0; i < oInput.length; i++) {
                        oInput[i].checked = true;
                    }

                } else {
                    for (var i = 0; i < oInput.length; i++) {
                        oInput[i].checked = false;
                    }
                }
            }

        };
    </script>
</head>
<body>
<input type="checkbox" id="input0"><br>