input复选框全选和取消全选及遇到的问题

最新推荐文章于 2025-05-21 09:23:18 发布

原创最新推荐文章于 2025-05-21 09:23:18 发布 · 5.2k 阅读

7 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍使用jQuery实现全选与反选功能的方法，并针对checkbox全选/全不选功能在使用attr方法时出现的问题提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

方法一：

           //实现全选与反选
            $("#allAndNotAll").click(function () {
                if ($(this).prop("checked")) {
                    $("input[name=checkitem]:checkbox").each(function () {
                        $(this).prop("checked", true);
                    });
                } else {
                    $("input[name=checkitem]:checkbox").each(function () {
                        $(this).prop("checked", false);
                    });
                }
            });

方法二：

            $("#allAndNotAll").click(function () {
                if ($("#allAndNotAll").prop('checked')) {
                    $("#allAndNotAll").prop("checked", true);
                    $("input[name=checkitem]:checkbox").prop("checked", true);
                } else {
                    $("#allAndNotAll").prop("checked", false);
                    $("input[name=checkitem]:checkbox").prop("checked", false);
                }
            });

当有一个取消选中，则取消全选：

            //当其中不勾选某一个选项的时候,则去掉全选复选框
            $(":checkbox[name=checkitem]").click(function () {
                $("#allAndNotAll").prop('checked',
                    $(":checkbox[name='checkitem']").length == $(":checkbox[name='checkitem']:checked").length);
            });

问题：当将所有的prop方法改为attr的时候，checkbox全选/全不选只有第一次点击的时候有效，后面点击全部无效

解决方法就是：直接使用prop方法，这是jQuery的一个bug。