在Javascript中检查2000复选框的快速方法？

我有一个网页上有几千个复选框，并且想添加一个“全部检查”功能。不幸的是，我目前的实施挂了谷歌浏览器至少五秒钟。在Javascript中检查2000复选框的快速方法？

这里是我（使用jQuery）尝试：

$('input').attr('checked', true); // as well as... 
$('input').click();

我认为，实际的Javascript运行速度快，但浏览器可能会遇到问题渲染所有的更新如此之快。我可以做别的事吗？

下面是一个简单的例子：https://www.msu.edu/~weinjare/checkboxes.html

我也跑了Chrome浏览器内置的探查，并得到这些结果： Profiler results

来源

2011-02-01 Jared

Tab键+空格键会工作得很好... =] – Vinnie 2011-02-01 05:18:55

我觉得你的第一个问题是事实，有屏幕上有很多复选框。我知道这是你想听到的，但我会考虑重新思考UI。 – griegs 2011-02-01 05:20:35

奇怪的是，在Firefox中速度更快。 – Keltex 2011-02-01 05:21:13

访问DOM直接属性可以更快，但我的猜测是，它不会显著快：

var els = $('input'); 
for (var i = 0; i < els.length; i++) { 
    els[i].checked = true; 
}

但正如你所说，最大的问题可能是渲染。您可以尝试在0毫秒的setIntervals内批处理执行。这会不会加速任何东西，但至少会停止“挂”：

var els = $('input'), i = 0; 
var interval = setInterval(function() { 
    var batchLen = i + 100 > els.length ? els.length : i + 100; 
    for (; i < batchLen; i++) { 
     els[i].checked = true; 
    } 
    if (i === els.length) clearInterval(interval); 
}, 0);

来源

2011-02-01 05:23:40

它需要大约0.5秒，Firefox浏览器。你确定问题是Google Chrome吗？

来源

2011-02-01 05:20:47

-4

尝试：

$('input[type="checkbox"]').attr('checked', true);

来源

2011-02-01 05:20:52 Victor

DOM操作是很慢的，你已经注意到......的东西，你可以做，以避免占用浏览器是使用方便的“setTimeout”功能可让您延迟功能的执行。这样，你返回线程浏览器，使其响应...

var checkAll = function() { 
    var inputs = $('input'); 
    var n = inputs.length; 
    for (var i = 0; i < n; i++) { 
     (function(i){ 
     setTimeout(function(){ 
      $(inputs.get(i)).attr('checked', true); 
     },0); 
     })(i); 
    } 
    return false; 
    };

来源

2011-02-01 05:43:06

我不是一个铬的大粉丝。我试着在我有一个旧版本的chrome & jquery。

正式版本2200 的Mozilla/5.0（窗口; U; Windows NT的5.2; EN-US）为AppleWebKit/525.13（KHTML，例如Gecko）铬/ 0.2.149.30 Safari/525.13

的jQuery 1.4.2

复选框在0.5秒内被检查。你使用什么版本？

来源

2011-02-01 05:49:56 ferosekhanj

这个解决方案的实际实现除了Chrome之外，如果您先清空复选框容器，则将该生成的字段生成为字符串并将其附加回DOM。所以，在你的例子这将是（只需要围绕复选框与ID箱子一个div）

<script> 
    var checkAll = function() { 
    html =""; 
    $("#boxes").empty(); 
    for (i=0;i<2000;i++) { 
    html+="<input type=checkbox checked>"; 
    } 
    $("#boxes").append(html); 
    return false;} 
    var uncheckAll = function() { html =""; 
    $("#boxes").empty(); 
    for (i=0;i<2000;i++) { 
    html+="<input type=checkbox>"; 
    } 
    $("#boxes").append(html); 
    return false;}; 
</script>

来源

2011-02-01 09:07:19 Michal

在Javascript中检查2000复选框的快速方法？

回答

相关问题