JavaScript案例（五）：全选、选中、反选

最新推荐文章于 2023-04-27 19:35:18 发布

@彼岸花

最新推荐文章于 2023-04-27 19:35:18 发布

阅读量202

点赞数 1

分类专栏： JAVA开发文章标签： javascript js checkbox dom

本文链接：https://blog.csdn.net/weixin_44825185/article/details/115194913

版权

JAVA开发专栏收录该内容

34 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>choose</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #bg{
            width: 500px;
            background-color: #ecffba;
            border: 1px solid #d3d3d3;
            border-radius: 5px;
            padding: 20px;
            margin: 50px auto;
        }
        #second,#third{
            font-size: 20px;
        }
        #third{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="bg">
        <div id="first">
            <h1>千千音乐盒</h1>
            <hr>
        </div>

        <div id="second">
            <input type="checkbox" id="y"><label for="y">漂洋过海来看你</label><br>
            <input type="checkbox" id="e"><label for="e">后来</label><br>
            <input type="checkbox" id="s"><label for="s">踏山河</label><br>
            <input type="checkbox" id="f"><label for="f">千千万万</label><br>
            <input type="checkbox" id="w"><label for="w">信仰</label><br>
        </div>
        <div id="third">
            <hr>
            <button id="all">全选</button>
            <button id="concel">取消</button>
            <button id="invert">反选</button>
        </div>
    </div>
    <script>
        var allbtn = document.getElementById("all");
        var concelbtn = document.getElementById("concel");
        var invertbtn = document.getElementById("invert");
    //    获取所有复选框
        var inputs = document.getElementsByTagName("input");
        allbtn.onclick = function () {
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        };
        concelbtn.onclick = function () {
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = false;
            }
        };

        invertbtn.onclick = function () {
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].checked === true){
                    inputs[i].checked = false;
                } else{
                    inputs[i].checked = true;
                }

            }
        }
    </script>
</body>
</html>

结果

在这里插入图片描述

@彼岸花

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例（五）：全选、选中、反选

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>choose</title> <style> *{ padding: 0; margin: 0; } #bg{ width: 500px;
复制链接

扫一扫