¿Manera rápida de marcar 2000 casillas de verificación en Javascript?

Question

Tengo una página web con un par de miles de casillas de verificación y me gustaría agregar la función "Comprobar todo". Lamentablemente, mi implementación actual bloquea Google Chrome durante al menos cinco segundos.

Aquí es lo que he intentado (con jQuery):

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

Creo que el actual Javascript corre rápido, sin embargo, el navegador podría estar teniendo problemas para la prestación de todos los cambios tan rápidamente. ¿Podría estar haciendo otra cosa?

Aquí es un ejemplo simplificado: https://www.msu.edu/~weinjare/checkboxes.html

También he encontré con el Analizador incorporado en Chrome y dieron estos resultados:

Answer 1

acceder al DOM atribuye directamente puede ser más rápido, aunque yo creo que no va a ser significativamente más rápido:

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

Pero como usted dice, el El mayor problema es probablemente la prestación. Podría intentar lotear la ejecución dentro de setIntervals de 0 milisegundos. Esto no va a acelerar nada, pero al menos se detendrá el "colgado":

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

se tarda aproximadamente 0,5 segundos con Firefox. ¿Estás seguro de que el problema es Google Chrome?

Answer 3

intento:

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

Answer 4

operaciones DOM son muy lento como ya se ha dado cuenta ... Algo que se puede hacer para evitar acaparando el navegador es utilice la práctica función "setTimeout" que le permite retrasar la ejecución de la función. De esta forma, devuelve el hilo al navegador para hacerlo receptivo ...

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

Answer 5

No soy un gran admirador de chrome. Intenté en una versión anterior de cromo & jquery que tengo.

Build Oficial 2200 Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/525.13 (KHTML, como Gecko) Chrome/0.2.149.30 Safari/525.13

jQuery 1.4.2

Las casillas de verificación se comprueban en 0,5 segundos. Qué versión estás usando?

Answer 6

Implementación práctica de esta solución, aparte de Chrome parece ser mucho más rápido si vacía el contenedor de la casilla de verificación primero, genere el lote como una cadena con el atributo marcado y anexado a DOM. Así que en su ejemplo sería (sólo hay que rodear las casillas de verificación con un div con id cajas)

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