选择checkbox反应慢，点一下停了1、2秒才选上，checkbox数量800个左右，求优化 jQuery

本帖最后由 kll329582600 于 2013-11-06 18:54:33 编辑

解决方案 »

  1.   

    input太多，而且如果没有动态生成input就不要使用live绑定。
    希望给出html另想法子优化jquery
      

  2.   

    800多个checkbox是同一类内容吗?你可以考虑分成多个分类.你想一下每按下一次,就要检查那么多个控件,在前端肯定会慢.建议你这800多个再分成几组checkbox,响应速度肯定会提升.
      

  3.   

    先获取checkbox 列表，分组缓存。不要每次点击事件都去 获取checkbox 列表
      

  4.   

    那也写出html结构来才好讨论。
      

  5.   

    哥一分钟也只能阅读500个字checkbox分组之后 放进cards里面
      

  6.   

    用正则肯定慢了，尽量不适用正则，优先使用简单id，tag，name，class。
    另外，800记录确实有点儿多，分页吧。
      

  7.   

    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var name = "[All items]";            //子选项没全选 allitems不选
                $(":checkbox:not([id*='" + name + "'])").live("click", function () {
                    var prefix = this.id.split(':')[0];
                    var suffix = '`' + this.id.split('`')[1];
                    var chkCount = $(":checkbox[id^='" + prefix + "'][id$='" + suffix + "']:not([id*='" + name + "']):checked").length;
                    var allCount = $(":checkbox[id^='" + prefix + "'][id$='" + suffix + "']:not([id*='" + name + "'])").length;
                    if (chkCount == allCount) {
                        $(":checkbox[id^='" + prefix + "'][id$='" + suffix + "'][id*='" + name + "']").get(0).checked = true;
                    }
                    else {
                        $(":checkbox[id^='" + prefix + "'][id$='" + suffix + "'][id*='" + name + "']").removeAttr("checked");
                    }
                });
            });      
        </script>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td>公司</td>
                <td>区域</td>
                <td colspan="2">工作地</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="COM:[All items]`0" />[All items]</td>
                <td><input type="checkbox" id="REG:[All items]`0" />[All items]</td>
                <td colspan="2"><input type="checkbox" id="GZD:[All items]`0" />[All items]</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="COM:01`0" />北京1公司</td>
                <td><input type="checkbox" id="REG:SH`0" />上海</td>
                <td><input type="checkbox" id="GZD:BJ:北京`0" />北京</td>
                <td>
                    <table>
                        <tr>
                            <td><input type="checkbox" id="GZD:北京:北京`0" />北京</td>
                        </tr>
                    </table>
                </td>
            </tr>
           
        </table>
    </body>
    </html>是这种结果的，主要是有省份的，呢列2个
    还有一个添加功能，会赋值一份的把`0变成`1
      

  8.   

    <script type="text/javascript">
        var s = "COM:[All items]`0";
        $(document).ready(function () {
            var name = "[All items]";
            $("input:checkbox").live("click", function () {
                var arr = this.id.match(/^([^:]+):([^`]+)`(\d+)$/);//截取ID
                var per = $("input:checkbox[id='" + arr[1] + ":"+name+"`" + arr[3] + "']");//对应的总checkbox
                this.checked||per.attr("checked",false);//如果本身没勾选，总checkbox也不勾选
                var box = $("input:checkbox[id^='" + arr[1] + ":'][id$='`" + arr[3] + "']");//一类checkbox集合   优化点：必须存为变量，本身这筛选器已经很耗时了，多筛选一次时间就会翻倍。不计:not
                arr[2]==name ? box.attr("checked",this.checked) : per.attr("checked",box.size()==box.filter(":checked").size()+1);
                //如果是总checkbox勾选，子checkbox全部同样勾选
                //判断 总个数 = 已经勾选的个数 +1 来自动决定总checkbox是否被勾选
            });
        });
    </script>