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