Chrome freezes when using javascript to check for many checkboxes, while firefox does it instantly

Question

I am using an asp: Repeater control on the server side that contains the table as a repeating element. One of the td tags in the table contains a check box. In the repeater header, I have a checkbox with id = "selectAllCheck".

I have the following javascript code

    var checkBox = document.getElementById('selectAllCheck');

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

    checkBox.onchange = changeAll;

This works fine in firefox, immediately all checkboxes are either checked or not checked if necessary. However, in chrome, it takes about 10 seconds. For example, I have about 250 flags on the page, but even if I put this number to 15, I can see that it is still not instant with chrome, but much faster.

- , , , , , .

:

<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

. . , . -

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

Answer 3

, :

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

#selectAllCheck .

---

: http://jsfiddle.net/mDGzW/1/

Chrome....

Answer 4

attr/removeAttr:

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

Answer 5

. , . , DOM, . .

, , - . ": checkbox" , .

:

  (function(){

    var cbs = $(".cb");

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

  })();

Answer 6

:

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

• , DOM , onChange
• "checked = true/false" jQuery prop/attr, . , DOM, , DOM jQuery.