JQuery 处理复选框问题

来源：互联网发布：mac wine 安装编辑：程序博客网时间：2024/06/01 20:10

JQuery 解决复选框问题

用JQuery解决问题，首先就是要下载jQuery插件，下载地址：点击打开链接

JQuery插件下载完之后，引入到你的HTML文件中，就可以开始用JQuery，来解决问题了。

因为是针对简单常用的复选框问题，所以我写了几个比较简单的复选框（只为了实现功能并达到讲解的效果），关于复选框，我大概定义为一个父类复选框（全选），和众多子复选框（点击全选而联动的复选框），我通过定义name来区别他们，你们也可以定义别的，以下是我的简略代码：

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

上面只涉及到HTML的知识，全选之类的实现，需要用到JQuery，请看下面（比较重要）

1.全选和全不选问题

从字面意思上来看，就是点击一个特殊的复选框，通过点击事件，来实现其他复选框的是否选中的状态，如果你能理解到这里，说明你离成功不算远了。

怎么才能满足用代码来充实你的想法呢，我提供给你我的一些想法：

        $(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);                }            });        });

设置每个子复选框的name 都为 “zi”，然后设置唯一的全选的复选框的name 为“fu”，然后在文件加载完，这个大前提下，设置全选框的点击事件

设置 a为父类复选框的长度， b为父类复选框是选中状态的长度，因为父类复选框只有一个，所以其实就是为了判断全选框是否被选中，所以之后我判断如果全选框选中了，那么我把所有子类的复选框的状态，设置为选中的状态。如果全选框没有选中，那么就把子复选框的状态设置为不选中状态，注意：我的一系列判断，全部在点击全选框的条件之下。所以，和其他条件下不冲突。

2. 反选（点击全部的子复选框，选中全选框），和全选状态下点击子类复选框，取消全选框的选中状态。

这两个我为什么可以总结到这里一起写？当然是有原因的，因为他们都涉及到了点击子类复选框的事件。其实，这两个功能，和全选、全不选，有异曲同工之妙，为什么这么说，请看实现这两个功能的代码：

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

细心的朋友可以看出来，这两个功能，我也是通过点击事件，不过是对子类复选框的点击事件来写的，分别得到子复选框的数量，和被选中的子复选框的数量，我把子复选框的name设置成为一致的，是因为想简单使用jQuery，也是因为每次点击子复选框都可以执行查询长度的效果，看吧，虽然简单，但是很有效。写到这里，复选框的常用功能，算是写完了。

下面是我的完整代码，大家如果没看懂的话，可以参考一下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>复选框Demo</title>    <script src="jquery-1.9.1.js"></script>    <script>        $(document).ready(function () {            $("input[name='zi']").click(function () {                var a=$("input[name='zi']").length;                var b=$("input[name='zi']:checked").length;                if(a>b){                    $(":checkbox[name='fu']").prop("checked", false);                }                else if(a==b){                    $(":checkbox[name='fu']").prop("checked", true);                }            });            $("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);                }            });        });    </script></head><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></html>

以上方法jQuery语句的排布，只适用于静态界面，如果变成了动态添加复选框界面，那么点击子复选框所触发的事件将不能执行。

解决办法参看以下代码：

 else {                        for (i = 0; i < data.length; i++) {                            var btn = $("");                            $("#xx").append(btn);                        }                        $("input[name='zi']").click(function () {                            var a=$("input[name='zi']").length;                            var b=$("input[name='zi']:checked").length;                            if(a>b){                                $(":checkbox[name='fu']").prop("checked", false);                            }                            if (a==b){                                $(":checkbox[name='fu']").prop("checked", true);                            }                        });                    }

就是将子复选框的点击事件，加入到 ajax 里面的对后台返回数据遍历的外面。父类复选框的点击事件可以直接放在 ajax外面，没有什么影响。

因为我也是新手，有什么说的不恰当的地方还请朋友们批评指正

希望能帮助到有需要的朋友。

阅读全文

1 0

mac wine 安装

原创粉丝点击

JQuery 处理复选框问题

JQuery 解决复选框问题

用JQuery解决问题，首先就是要下载jQuery插件，下载地址： 点击打开链接

用JQuery解决问题，首先就是要下载jQuery插件，下载地址：点击打开链接