Javascript에서 2000 개의 체크 박스를 빠르게 확인하는 방법은 무엇입니까?

Question

나는 수천 개의 체크 박스가있는 웹 페이지를 가지고 있으며 "모두 확인"기능을 추가하려고합니다. 안타깝게도 현재 구현 된 Chrome은 5 초 이상 Chrome을 정지시킵니다. 여기

내가 (jQuery를 사용하여) 시도 것입니다 :

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

내가 실제 자바 스크립트가 이렇게 빨리 모든 업데이트를 렌더링 빨리, 그러나 브라우저가 가진 수 있습니다 문제를 실행 있다고 생각합니다. 나는 다른 것을 할 수 있을까? https://www.msu.edu/~weinjare/checkboxes.html

나는 또한 크롬에 내장 된 프로파일 러를 실행하고이 결과를 가지고 : 이

Answer 1

는 빠를 수 있습니다 직접 속성 :

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

그러나 만약 당신이 말한대로 가장 큰 문제는 아마도 렌더링 일 것입니다. 0 밀리 초의 setInterval 내에서 실행을 일괄 처리 할 수 ​​있습니다. 이것은 아무것도 속도를하지 않습니다 만, 적어도 "매달려"중지 : 이미 눈치 챘로

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); 

Answer 2

그것은 파이어 폭스와 함께 약 0.5 초 정도를 여기

는 단순화 된 예입니다. 문제가 Google 크롬인지 확인 하시겠습니까?

Answer 3

시도 : 내 생각 엔 그 속도가 매우 빠르고되지 않을 것입니다 불구하고 DOM 액세스

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

Answer 4

DOM 작업이 정말 느리게 ... 당신이 할 수있는 무언가를 브라우저이다 독차지 피하기 위해 함수의 실행을 지연시킬 수있는 편리한 "setTimeout"함수를 사용하십시오. 이렇게하면 응답하는 브라우저에 스레드를 반환합니다 ...

Answer 5

나는 크롬의 대단한 팬이 아닙니다. 나는 크롬의 이전 버전에서 시도했다 & 내가 가지고있는 jquery.

공식 빌드 2200 모질라/5.0 (윈도우, U, 윈도우 NT 5.2; EN-US) AppleWebKit/525.13 (게코 같은 KHTML) 크롬/0.2.149.30 사파리/525.13

jQuery를 1.4.2

확인란은 0.5 초 후에 확인됩니다. 어떤 버전을 사용하고 있습니까?

Answer 6

크롬을 제외하고이 솔루션을 실제로 구현하면 체크 박스 컨테이너를 먼저 비우고 체크 된 속성이있는 문자열로 많이 생성 한 다음 다시 DOM에 추가하면 훨씬 빠릅니다. 그래서 예에서 그것은 (단지 ID 상자 사업부와 체크 박스를 둘러싸고해야 할) 것

<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>