Chrome se bloquea al usar javascript para marcar muchas casillas de verificación, mientras que Firefox lo hace instantáneamente

Estoy usando un control de server asp: Repeater que contiene una tabla ya que es un elemento repetible. Una de las tags td en la tabla contiene una checkbox. En el encabezado del repetidor, tengo una checkbox con id = "selectAllCheck".

Tengo el siguiente código de javascript

var checkBox = document.getElementById('selectAllCheck'); function changeAll() { if (checkBox.checked == 1) { $('input:checkbox').attr('checked', "checked"); } else { $('input:checkbox').attr('checked', ""); } } checkBox.onchange = changeAll; 

Esto funciona bien en Firefox, al instante todas las casillas de verificación se marcan o no cuando es necesario. Sin embargo, en Chrome tarda unos 10 segundos. Tengo aproximadamente 250 casillas de verificación en la página por cierto, pero incluso bajando ese número a solo 15, puedo ver que todavía no es instantáneo con Chrome, sino mucho más rápido.

Si alguien ha encontrado este problema antes, ha visto artículos relacionados con este problema o sabe cómo resolver este problema, le estaría muy agradecido.

EDITAR: publicó la página

 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentMain" Runat="Server"> <form id="webForm" runat="server"> <asp:Label ID="sourceLabel" runat="server" AssociatedControlID="sourceList" Text="Source"></asp:Label> <asp:DropDownList ID="sourceList" runat="server" />&nbsp; <asp:Button ID="showButton" runat="server" Text="View" /> <asp:Repeater ID="Repeater_DIBS" runat="server"> <HeaderTemplate> <table> <tr><th><input type="checkbox" id="selectAllCheck" /> (un)check All</th> <th>SourceID</th><th>FieldID</th><th>Source Indicator</th><th>Date Data Updated</th> <th>Message</th></tr> </HeaderTemplate> <ItemTemplate> <tr> <td style='width:1%;white-space:nowrap;'><input type='checkbox' class='checkBoxes' /></td> <td style='width:1%;white-space:nowrap;'><%# Eval("SourceID") %></td> <td style='width:1%;white-space:nowrap;'><%# Eval("FieldID") %></td> <td class='indicator' style='width:1%;white-space:nowrap;'><%# Eval("SourceIndicator") %></td> <td style='width:1%;white-space:nowrap;'><%# Eval("DateDataUpdated") %></td> <td style='width:1%;white-space:nowrap;' class='status'></td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </form> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="ContentJS" Runat="Server"> <script type="text/javascript"> $("#selectAllCheck").change(function () { if (this.checked) { $("input:checkbox.checkBoxes").attr("checked", "checked"); } else { $("input:checkbox.checkBoxes").removeAttr("checked"); } }); </script> </asp:Content> 

Creo que es un error en Chrome. Cuantas más casillas de verificación tenga en una página, más lento será el process. Cuando tienes alnetworkingedor de 500, la velocidad está bien. El problema es que cuando obtienes más de 1000, el process para verificar todos los recuadros aumenta exponencialmente. En IE9 y FF4, este process no importa. Incluso si no usaste jQuery y tratas de utilizar js rectas, terminas con Chrome cada vez más lento cuantas más casillas de verificación usas en una página.

Intente limitar el número de casillas de verificación si es posible.

Está seleccionando todas las casillas de verificación en la página. En lugar de esto, asigne una class a todas las casillas de verificación secundarias y active la propiedad marcada de esos cuadros de text. También especifique un elemento principal para que la búsqueda sea más específica. Algo como

 $("#chkAll").change(function(){ if (this.checked) { $("#containerid input:checkbox.yourclass").attr("checked", "checked"); } else { $("#containerid input:checkbox.yourclass").removeAttr("checked"); } }); 

testing esta refactorización y debería acelerar las cosas:

 $(function() { $("#selectAllCheck").click(function(){ $("input:checkbox:not(#selectAllCheck)").attr("checked", $(this).is(":checked")); }); }); 

vincula el evento a #selectAllCheck y verifica todas las casillas de verificación restantes.


ejemplo aquí: http://jsfiddle.net/mDGzW/1/

funciona al instante en Chrome ….

No busque todas las casillas de verificación todo el time. Si no son dynamics, no hay razón para hacerlo. Le toma al browser una buena cantidad de time mirar siempre a través del DOM para encontrar los elementos. Hazlo una vez y conserva la reference.

Además, el mejor selector que puede usar es solo un nombre de class en este caso. La búsqueda de "input: checkbox" es mucho más lenta que solo mirar la class.

Idea básica:

  (function(){ var cbs = $(".cb"); $("#checkall").click( function(){ var state = this.checked; cbs.attr("checked", state); } ) })(); 

Utilizaría un attr / removeAttr:

 $(document).ready(function(){ $('#selectAllCheck').click(function(){ if($(this).is(':checked')) { $('input:checkbox').attr('checked', 'checked'); } else { $('input:checkbox').removeAttr('checked'); } }); }); 

Algunos ajustes menores de performance:

http://jsfiddle.net/H9kK9/2/

  • Guarda en caching tu list de casillas de verificación por adelantado, por lo que la costosa consulta DOM ya está terminada cuando un usuario activa el cambio.
  • Use el nativo "checked = true / false" en lugar de jQuery's prop / attr wrapper, para ahorrar en gastos generales. Checked es una propiedad DOM muy estable y antigua, y debería sentirse cómodo configurando un elemento DOM sin la ayuda de jQuery.