JQuery 实现复选框全选反选功能

最新推荐文章于 2021-05-18 11:01:58 发布

原创

最新推荐文章于 2021-05-18 11:01:58 发布 · 764 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery 实现复选框全选反选功能 #怎样实现复选框的全选与反选 #jQuery 处理复选框问题 #怎样让复选框全选反选 #复选框全选问题

本文介绍了如何利用JQuery来实现复选框的全选和反选功能。通过设置全选复选框的name属性为'fu'，并监听其点击事件，可以实现在所有子复选框间进行全选操作。同时，当任一子复选框被点击时，会检查是否需要选中全选复选框。提供了完整的HTML和JQuery代码示例。

HTML部分

<body>
<input type="checkbox" name="fu">全选(父)<br>
<input type="checkbox" name="zi">子1<br>
<input type="checkbox" name="zi">子2<br>
<input type="checkbox" name="zi">子3<
</body>

全选和全不选

        $(document).ready(function () {
            $("input[name='fu']").click(function () {

                var a=$("input[name='fu']").length;
                var b=$("input[name='fu']:checked").length;
                if (a==b){
                    $(":checkbox[name='zi']").prop("checked", true);
                }else {
                    $(":checkbox[name='zi']").prop("checked", false);
                }

            });
        });
 $(document).ready(function () {
            $("input[name='fu