JQuery 处理复选框问题

时间：2021-06-30 08:08:12

JQuery 解决复选框问题
 


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

 
Query插件下载完之后，引入到你的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，也是因为每次点击子复选框都可以执行查询 长度 的效果， 看吧 ，虽然简单，但是很有效。写到这里，复选框的常用功能，算是写完了。
以上方法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 里面的 对后台返回数据遍历的外面。   由衷希望能帮助到你们。


   


















 

标签：
相关文章