以上代码是用于测试在area1区域中的checkbox状态在复制到area2中时,勾选状态是否被保留 下面是360浏览器的效果,如果都这样那我就万事大吉了:下面是ie8的效果:可以看到,在ie8中,它只认html源在多次尝试后,采用了一种低效的方法,思路大体是在执行之前对每一checkbox进行元素内容替换,但是这样效率很低,在一千个checkbox下测试,一个全选需要4-5秒时间,机器还算可以的这样的效率的话是挺难被接受的。想请教一下大家对个这事情有没有什么好的想法或解决方法

解决方案 »

  1.   

    参考 :http://www.cnblogs.com/cloudgamer/archive/2008/10/06/TableOrder.html这个中的方法
      

  2.   

    我做了一个单间的测试,<script type="text/javascript">
        var c = [];
        //var unc = [];
        $(document).ready(function() {
            $("#btnClone").click(function() {
                $("#area1 :checkbox").each(function() {
                    if ($(this).attr("checked") == true) {
                        c.push($(this).val());
                    }
                });
                $("#area2").html($("#area1").clone());
                $("#area2 :checkbox").each(function() {
                    for (var i = 0; i < c.length; i++) {
                        if ($(this).val() == c[i]) {
                            $(this).attr("checked", true);
                        }
                    }
                });
                alert(c.join(','));
                c.length = 0;
            });
        });
    </script>
    </head>
    <body>
    源area1
    <div id="area1"><input type="checkbox" value="1" checked="checked" />1
    <input type="checkbox" value="2" />2
    <input type="checkbox" value="3" />3
    <input type="checkbox" value="4" />4
    <input type="checkbox" value="5" />5
    <input type="checkbox" value="6" />6
    <input type="checkbox" value="7" />7
    <input type="checkbox" value="8" />8
    <input type="checkbox" value="9" />9
    </div>
        <input id="btnClone" type="button" value="Clone" /><br/>
    目标area2    
    <div id="area2"></div>
    </body>
    我勾上7,8然后查看生成的源码<SCRIPT type=text/javascript>
        var c = [];
        //var unc = [];
        $(document).ready(function() {
            $("#btnClone").click(function() {
                $("#area1 :checkbox").each(function() {
                    if ($(this).attr("checked") == true) {
                        c.push($(this).val());
                    }
                });
                $("#area2").html($("#area1").clone());
                $("#area2 :checkbox").each(function() {
                    for (var i = 0; i < c.length; i++) {
                        if ($(this).val() == c[i]) {
                            $(this).attr("checked", true);
                        }
                    }
                });
                alert(c.join(','));
                c.length = 0;
            });
        });
    </SCRIPT>
    </HEAD>
    <BODY>源area1 
    <DIV id=area1><INPUT value=1 CHECKED type=checkbox jQuery1261192210734="3">1 <INPUT value=2 type=checkbox jQuery1261192210734="4">2 <INPUT value=3 type=checkbox jQuery1261192210734="5">3 <INPUT value=4 type=checkbox jQuery1261192210734="6">4 <INPUT value=5 type=checkbox jQuery1261192210734="7">5 <INPUT value=6 type=checkbox jQuery1261192210734="8">6 <INPUT value=7 type=checkbox jQuery1261192210734="9">7 <INPUT value=8 type=checkbox jQuery1261192210734="10">8 <INPUT value=9 type=checkbox jQuery1261192210734="11">9 </DIV><INPUT id=btnClone value=Clone type=button jQuery1261192210734="2"><BR>目标area2 
    <DIV id=area2>
    <DIV id=area1><INPUT value=1 CHECKED type=checkbox jQuery1261192210734="12">1 <INPUT value=2 type=checkbox jQuery1261192210734="13">2 <INPUT value=3 type=checkbox jQuery1261192210734="14">3 <INPUT value=4 type=checkbox jQuery1261192210734="15">4 <INPUT value=5 type=checkbox jQuery1261192210734="16">5 <INPUT value=6 type=checkbox jQuery1261192210734="17">6 <INPUT value=7 type=checkbox jQuery1261192210734="18">7 <INPUT value=8 type=checkbox jQuery1261192210734="19">8 <INPUT value=9 type=checkbox jQuery1261192210734="20">9 </DIV></DIV></BODY>虽然最后7,8被勾选上,但是在源码中并没有像1这样的CHECKED,也就是说仅是呈现效果对我的这个整体需求是不符合的
    其实我的意思是,area1就是一个大容器,当某一项被选中,或被取消,都直接体现在它的源码的改变上。