checkbox实现全选和反选代码

最新推荐文章于 2022-03-07 22:34:54 发布

原创最新推荐文章于 2022-03-07 22:34:54 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

js+jquery 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的全选复选框与多个子复选框联动的功能。当全选框被选中时，所有子项也会被选中；若任一子项未被选中，则全选框也会变为未选中状态；所有子项都被选中时，全选框也会自动选中。

实现目标：

1. 全选的checkbox选中时，子checkbox全部选中。反之，全部不选；

2.子checkbox中，只要有没有被选中的，取消全选checkbox的选中；

3.子checkbox的数量和子checkbox被选中的数量一样时，全选checkbox要被选中；

html代码：

<!-- table头全选 -->
<th>全选 <input type="checkbox" id="selectAll"></th>

<!-- tbody单选框 -->
<td><input type="checkbox" class="singleCheckBox" data-id="${e.id!}"></td>

jquery代码：

function batchSelectCheckBox() {
        $("body").on("click", "#selectAll", function () {
            var checked = this.checked;
            $(this).closest("table").find("input[type=checkbox]").each(function () {
                this.checked = checked;
            });
        });

        $("body").on("click", ".singleCheckBox", function () {
            var totalcheckbox = $(".singleCheckBox").length;
            var rowCheckbox = $(".singleCheckBox:checked").length;
            if (rowCheckbox == 0) {
                $("#selectAll").prop("checked", false);
            }
            if (totalcheckbox == rowCheckbox) {
                $("#selectAll").prop("checked", true);
            } else {
                $("#selectAll").prop("checked", false);
            }
        });
    }