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

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

暗黑骑士1

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

阅读量705

点赞数 2

分类专栏：复选框功能，jQuery 文章标签： JQuery 实现复选框全选反选功能怎样实现复选框的全选与反选 jQuery 处理复选框问题怎样让复选框全选反选复选框全选问题

本文链接：https://blog.csdn.net/LOVE_HopeOne/article/details/76548641

版权

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

摘要由CSDN通过智能技术生成

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);