js实现全选复选

最新推荐文章于 2022-04-19 10:55:12 发布

淘气的小拖鞋

最新推荐文章于 2022-04-19 10:55:12 发布

阅读量175

点赞数

分类专栏：编程语言

本文链接：https://blog.csdn.net/G_JD1234/article/details/99640984

版权

编程语言专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    #container {
        width: 300px;
        height: 200px;
        border: 3px solid pink;
        margin-left: 600px;
        background: rgba(0, 128, 255, 0.1);
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var allSelect = document.getElementById("allSelect");
        var noSelect = document.getElementById("noSelect");
        var btn2 = document.getElementById("btn2");
        // 获取所有的input标签
        var oDiv = document.getElementById("chk");
        var chks = oDiv.getElementsByTagName("input");
        allSelect.onclick = function() {
            for (var i = 0; i < chks.length; i++) {
                chks[i].checked = true; // 全部选中
            }
        };
        noSelect.onclick = function() {
            // 全不选
            for (var i = 0; i < chks.length; i++) {
                chks[i].checked = false;
            }
        };
        btn2.onclick = function() {
            for (var i = 0; i < chks.length; i++) {
                // 进行反选
                chks[i].checked = !chks[i].checked;
            }
        };

    };
    </script>
</head>

<body>
    <div id="top">
    </div>
    <div id="container" align="center">
        <input type="button" value="全选" id="allSelect">
        <input type="button" value="反选" id="btn2">
        <input type="button" value="全取消" id="noSelect">
        <hr size="5" color="white">
        <div id="chk">
            <input type="checkBox">唱
            <br>
            <input type="checkBox">跳
            <br>
            <input type="checkBox">rap
            <br>
            <input type="checkBox">篮球
            <br>
            <input type="checkBox">练习生
            <br>
            <input type="checkBox">基尼太美
        </div>
    </div>
</body>

</html>

在这里插入图片描述

淘气的小拖鞋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现全选复选

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #container { width: 300px; hei...
复制链接

扫一扫