javascriptを使用して多くのチェックボックスをチェックするとChromeがハングアップしますが、Firefoxは即座に応答します

Question

私はasp：Repeaterサーバーサイドコントロールを使用しています。テーブルのtdタグの1つにチェックボックスがあります。リピータのヘッダには、id = "selectAllCheck"のチェックボックスがあります。

私は、次の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; 

これはFirefoxでうまく動作しますが持っている必要が、瞬時にすべてのチェックボックスがオンまたはオフのいずれかされています。しかし、クロムでは約10秒かかります。ところで、ページには約250個のチェックボックスがありますが、その数字を15にするだけでも、それはまだクロムで瞬時ではなく、はるかに速いことがわかります。

誰かがこの問題に遭遇した場合、この問題に関連する記事を見た場合、またはこの問題を解決する方法を知っている場合は非常に感謝します。

EDIT：投稿ページ

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

Answer 1

私はそれがChromeのバグだと思います。ページ上にあるチェックボックスの数が多いほど、処理が遅くなります。あなたは500を持っているとき、速度は大丈夫です。問題は、1000を超えると、すべてのボックスを指数関数的にチェックするプロセスがより大きくなるということです。 IE9とFF4では、このプロセスは関係ありません。 jQueryを使用せずにストレートjs​​を使用しようとしても、ページ上で使用するチェックボックスの数が増えるほどChromeの処理速度が遅くなります。

可能であれば、チェックボックスの数を制限してみてください。

Answer 2

はこのリファクタリングを試してみて、それが物事をスピードアップする必要があります

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

は#selectAllCheckとチェックし、残りのすべてのチェックボックスにイベントをバインドします。ここ

---

例：Chromeでhttp://jsfiddle.net/mDGzW/1/

作品のインスタント....

Answer 3

あなたはページ内のすべてのチェックボックスを選択しています。この代わりに、すべての子チェックボックスにクラスを割り当て、それらのテキストボックスのcheckedプロパティを切り替える。また、検索がより具体的になるように親要素を指定します。私はATTR/removeAttrを使用したい

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

Answer 4

ような何か：

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

Answer 5

時間のチェックボックスのすべてのすべてを見てはいけません。それらが動的でない場合、それを行う理由はありません。要素を見つけるためにDOMを常に調べるには、ブラウザに時間がかかります。それを一度行い、参照を保持してください。

また、使用できる最適なセレクタはこの場合はクラス名です。 「入力：チェックボックス」ルックアップは、クラスを見るよりもはるかに遅いです。

Basic idea:

(function(){ 

    var cbs = $(".cb"); 

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

    })(); 

Answer 6

いくつかのマイナーなパフォーマンスの調整：

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

• がキャッシュ先行チェックボックスのリストを、ユーザーがのonChange
• は=確認」ネイティブを使用してトリガすると、高価なDOMクエリがすでに終了しているので、 jQueryのprop/attrラッパーの代わりに「true/false」を使用して、オーバーヘッドに保存します。 Checkedは非常に安定した古いDOMプロパティで、jQueryの助けを借りずにDOM要素に設定するのが快適であるはずです。