复选框的功能实现

coder_MX

于 2021-02-05 11:16:20 发布

阅读量564

点赞数 1

分类专栏： JavaScript学习文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_50450419/article/details/113685136

版权

前端开发 JavaScript 全选反选 checkbox

关键词由CSDN通过智能技术生成

JavaScript学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            //获取元素
            var checks = document.getElementsByClassName("check");  //这是所有运动项目
            var isCheckAll = document.getElementById("isCheckAll");  //已全选
            var checkAll = document.getElementById("checkAll");      //全选
            var unCheckAll = document.getElementById("unCheckAll");  //全不选
            var rest = document.getElementById("rest");              //反选
            var btn = document.getElementsByTagName("button")[0];
            //绑定事件

            //全选
            checkAll.onclick = function () {
                for (var i = 0; i < checks.length; i++) {
                    checks[i].checked = "checked";
                }
                isCheckAll.checked = "checked";

            }

            //全不选
            unCheckAll.onclick = function () {
                for (var i = 0; i < checks.length; i++) {
                    checks[i].checked = "";
                }
                isCheckAll.checked = "";
            }

            //反选
            rest.onclick = function () {
                for (var i = 0; i < checks.length; i++) {
                    if (checks[i].checked == "") {
                        checks[i].checked = "checked";
                    } else {
                        checks[i].checked = "";
                    }
                }
            }

            //判断是否全选
            for (var i = 0; i < checks.length; i++) {  //每个项目框都要进行绑定
                checks[i].onclick = function () {
                    for (var i = 0; i < checks.length; i++) {
                        if (checks[i].checked == "") {
                            isCheckAll.checked = ""
                            break;
                        } else {
                            isCheckAll.checked = "checked";
                        }
                    }
                }
            }

            //提交按钮
            btn.onclick = function () {
                var str = "";
                for (var i = 0; i < checks.length; i++) {
                    // alert(checks[i].checked);
                    if (checks[i].checked == true) {
                        str += checks[i].value + "，";
                    }
                }

                //去除最后一个逗号
                str = str.substr(0, str.length - 1);


                //判断输出
                if (str != 0) {
                    alert("你要选择的运动项目为：" + str);
                } else {
                    alert("您未选择任何项目！");
                }

            }

        }


    </script>
</head>

<body>
    <form action="">
        <p>是否全选</p>
        <input type="checkbox" id="isCheckAll">已全选
        <p>请选择你喜欢的运动</p>
        <input type="checkbox" id="check1" class="check" value="篮球">篮球
        <input type="checkbox" id="check2" class="check" value="羽毛球">羽毛球
        <input type="checkbox" id="check3" class="check" value="乒乓球">乒乓球
        <p>快捷操作</p>
        <input type="button" id="checkAll" value="全选">
        <input type="button" id="unCheckAll" value="全不选">
        <input type="button" id="rest" value="反选">
        <button>提交</button>

    </form>
</body>

</html>