“CheckAll"复选框只适用于asp:Repeater的第一页.如何修复

"CheckAll" checkbox works only with the first page of asp:Repeater. How to fix?

本文关键字:Repeater 第一页 何修复 asp 适用于 CheckAll quot 复选框      更新时间:2023-09-26

我有一个带有复选框的中继器:

<asp:Repeater ID="rpt_users" runat="server" OnItemCommand="rpt_users_ItemCommand" OnItemDataBound="rpt_users_ItemDataBound">
    <HeaderTemplate>
        <table id="usersTable">
            <tr>
                <th rowspan="2">All<br /><asp:CheckBox runat="server" ID="checkAll" OnCheckedChanged="checkAll_CheckedChanged"/></th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr class="c0">
            <td><asp:CheckBox ID="CheckSelect" runat="server" /></td>               
        </tr>
    </ItemTemplate>
</asp:Repeater>

下面是我放置在Repeater控件后面的一个脚本:

<script type="text/javascript">
    var repeater1Control = document.getElementById('<%= rpt_users.ClientID %>');
    $('input:checkbox[id$=checkAll]', repeater1Control).click(function (e) {
        if (this.checked) {
            $('input:checkbox[id$=CheckSelect]', repeater1Control).attr('checked', true);
        }
        else {
            $('input:checkbox[id$=CheckSelect]', repeater1Control).removeAttr('checked');
        }
    });

    $('input:checkbox[id$=CheckSelect]', repeater1Control).click(function (e) {
        //To uncheck the header checkbox when there are no selected checkboxes in itemtemplate
        if ($('input:checkbox[id$=CheckSelect]:checked', repeater1Control).length == 0) {
            $('input:checkbox[id$=checkAll]', repeater1Control).removeAttr('checked');
        }
            //To check the header checkbox when there are all selected checkboxes in itemtemplate
        else if ($('input:checkbox[id$=CheckSelect]:checked', repeater1Control).length == $('input:checkbox[id$=CheckSelect]', repeater1Control).length) {
            $('input:checkbox[id$=checkAll]', repeater1Control).attr('checked', true);
        }
    });

不幸的是,它只在中继器的第一页起作用。如果我转到第二页或更远的地方,那么当我按下标题中的"CheckAll"复选框时,什么也没有发生。如何解决这个问题?

try this

(function($){ 
  var bindEvents =  function(){
   // bind events here;
    var repeater1Control = document.getElementById('<%= rpt_users.ClientID %>');
    $('input:checkbox[id$=checkAll]', repeater1Control).click(function (e) {
        if (this.checked) {
            $('input:checkbox[id$=CheckSelect]', repeater1Control).attr('checked', true);
        }
        else {
            $('input:checkbox[id$=CheckSelect]', repeater1Control).removeAttr('checked');
        }
    });

    $('input:checkbox[id$=CheckSelect]', repeater1Control).click(function (e) {
        //To uncheck the header checkbox when there are no selected checkboxes in itemtemplate
        if ($('input:checkbox[id$=CheckSelect]:checked', repeater1Control).length == 0) {
            $('input:checkbox[id$=checkAll]', repeater1Control).removeAttr('checked');
        }
            //To check the header checkbox when there are all selected checkboxes in itemtemplate
        else if ($('input:checkbox[id$=CheckSelect]:checked', repeater1Control).length == $('input:checkbox[id$=CheckSelect]', repeater1Control).length) {
            $('input:checkbox[id$=checkAll]', repeater1Control).attr('checked', true);
        }
    });
  };
  // initial load
  $(document).ready( bindEvents);
  // every async load by update panel
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindEvents);
})(jQuery);