【Javascript】【jQuery】jQuery实现全选功能

最新推荐文章于 2022-01-06 18:42:02 发布

ByteFlys

最新推荐文章于 2022-01-06 18:42:02 发布

阅读量352

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/u013718730/article/details/89511637

版权

javascript 专栏收录该内容

107 篇文章 6 订阅

订阅专栏


    <body>
        <input type="checkbox" id="check-all">Check All</input> <br/>
        <input type="checkbox" class="check-item">A</input>
        <input type="checkbox" class="check-item">B</input>
        <input type="checkbox" class="check-item">C</input>
        <input type="checkbox" class="check-item">D</input>
        <input type="checkbox" class="check-item">E</input> <br/>
        <button id="bt-check">Check All</button>
        <button id="bt-uncheck">Uncheck All</button>
        <button id="bt-reverse">Reverse Check</button>
        <button id="bt-submit">Submit</button>
    </body>

    <style type="text/css">

    </style>

    <script type="text/javascript" src="../js/jquery-3.4.0.js"></script>
    <script>
        $(() => {
            //点击全选框时，选择或取消全部Item
            $("#check-all").click(function () {
                $(".check-item").prop("checked", this.checked);
            });

            //Item发生变化时，全选框同步变化
            $(".check-item").click(function () {
                let isAllSelected = $(".check-item:not(:checked)").length == 0;
                $("#check-all").prop("checked", isAllSelected);
            });

            //全选
            $("#bt-check").click(function () {
                $(".check-item").prop("checked", true);
                $("#check-all").prop("checked", true);
            });

            //全部取消
            $("#bt-uncheck").click(function () {
                $(".check-item").prop("checked", false);
                $("#check-all").prop("checked", false);
            });

            //反向选取
            $("#bt-reverse").click(function () {
                $(".check-item").each(function () {
                    this.checked = !this.checked;
                });
                let isAllSelected = $(".check-item:not(:checked)").length == 0;
                $("#check-all").prop("checked", isAllSelected);
            });

            //提交
            $("#bt-submit").click(() => {
                $(".check-item:checked").each(function () {
                    alert(this.nextSibling.nodeValue);
                });
            });
        });
    </script>

在这里插入图片描述