实现全选、全不选、反选并输出所选的功能

最新推荐文章于 2024-07-31 16:33:32 发布

是山山而川啊

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量227

点赞数 1

分类专栏：前端文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_43816935/article/details/122435151

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现全选、全不选、反选并输出所选的功能（Html+CSS+Js）

1、效果展示

选择选项，点击确定，输出所选
点击反选，并输出结果

2、直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>观 微</title>
    <script>
        window.onload = function () {
            // 获取所有的按钮
            var btns = document.getElementsByTagName("button");
            // 获取所有的选项input
            var inputs = document.getElementsByTagName("input");

            // 全选或者不选的时候 调用此函数
            function fun(flag) {
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = flag;
                }
            }

            //全选
            btns[0].onclick = function () {
                fun(true);
            }

            //不选
            btns[1].onclick = function () {
                fun(false);
            }

            //反选
            btns[2].onclick = function () {
                // 遍历所有的选项，判断每一个选项是否被选中
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = !inputs[i].checked;
                }
            }

            //确定
            btns[3].onclick = function () {
                var msg = "";
                var results = document.getElementsByTagName("input");
                for (let i = 0; i < inputs.length; i++) {
                    if (inputs[i].checked) {
                        msg += inputs[i].value;
                    }
                }
                var console = document.getElementById("result");
                for (var i = 0; i < console.childNodes.length; i++) {
                    var node = console.childNodes[i];
                    node.parentNode.removeChild(node);
                }
                var p = document.createElement("p");
                p.innerHTML = msg;
                console.append(p);
            }
        }
    </script>
</head>

<body>
    <div id="box1">
        <a>请选择:</a>
        <br>
        <input type="checkbox" value="A">A选项</input>
        <input type="checkbox" value="B">B选项</input>
        <input type="checkbox" value="C">C选项</input>
        <input type="checkbox" value="D">D选项</input>
    </div>
    <div id="box2">
        <button>全选</button>
        <button>全不选</button>
        <button>反选</button>
        <button>确定</button>
        <br>
        <a>您的选项是:</a>
    </div>
    <div id="result"></div>
</body>

</html>