Выберите все флажки в GridView ASP.NET, используя JQuery

Question

У меня есть столбцы checkBox в столбцах шаблонов Gridview, которые называются «Категория A» и «Категория B». Я хочу использовать функцию «Выбрать все», то есть когда пользователь устанавливает флажок «Выбрать все» в столбце категории «А», все флажки должны быть отмечены в этом столбце. То же самое для категории B. Я пытаюсь с кодом ниже. Проблема с моим кодом заключается в том, что он выбирает все флажки во всем виде сетки, «Категория A», а также флажки «Категория B». Но я хочу, чтобы в одном столбце были установлены только флажки.

 function SelectAllCheckboxesA(chk) {
                $('#<%=gvSurveys.ClientID %>').find("input:checkbox").each(function() {
                    if (this != chk) {
                        if ($(this).hasClass('CatA') != false) {
                            this.checked = chk.checked;
                        }
                    }
                    else {
                        alert($(this));
                    }
                });
            }




 <asp:GridView ID="gvSurveys" runat="server" AutoGenerateColumns="false" AllowSorting="True" Width="1500px">
                           <Columns>
                              <asp:TemplateField>
                                 <HeaderTemplate>Category A
    <asp:CheckBox ID="chkSelectAllCatA" runat="server" Visible="false" onclick="javascript:SelectAllCheckboxesA(this);" CssClass="SACatA" />
    </HeaderTemplate>
    <ItemTemplate>
    <asp:CheckBox ID="chkCatA" runat="server" Enabled="false" CssClass="CatA"  />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
    <HeaderTemplate>
    Category B
    <asp:CheckBox ID="chkSelectAllCatB" runat="server" Visible="false" CssClass="CatB" onclick="javascript:SelectAllCheckboxesB(this);" />
    </HeaderTemplate>
    <ItemTemplate>
    <asp:CheckBox ID="chkCatB" runat="server" Enabled="false" />
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>

Answer 1

Это основано на решении, предложенном Ashish Patil с некоторыми изменениями, чтобы очистить флажок в строке заголовка, когда любой из флажков в строках сетки не отмечен.

В GridView создайте столбец шаблона:

<asp:templatefield>
<headertemplate>
  <asp:CheckBox ID="chkSelectAll" cssclass="chkHeader" runat="server" />
</headertemplate>
<itemtemplate>
  <asp:CheckBox ID="chkSelect" cssclass="chkItem" runat="server"/>
</itemtemplate>
</asp:templatefield>

jquery-скрипт, поместите его в $ (документ). Например, уже:

var headerChk = $(".chkHeader input");
var itemChk = $(".chkItem input");

headerChk.click(function () { 
 itemChk.each(function () { 
  this.checked = headerChk[0].checked; }) 
});

itemChk.each(function () {
  $(this).click(function () {
    if (this.checked == false) { headerChk[0].checked = false; }
  })
});

Answer 2

Почему бы вам не выбрать только флажки категории А:

$('#<%=gvSurveys.ClientID %>').find("input:checkbox[Id*=chkCatA]")

Будет ли это работать?

Answer 3

Создать строку с флажком в заголовке:

<asp:TemplateField HeaderText="Merged Client">
                <HeaderTemplate>
                   <asp:CheckBox ID="chkboxSelectAll" runat="server" AutoPostBack="true" OnCheckedChanged="chkboxSelectAll_CheckedChanged" ></asp:CheckBox> Merged Client
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckMergedClient" **runat="server"** **onclick="CheckChanged()" OnCheckedChanged="CheckMergedClient_CheckedChanged"** **AutoPostBack="true"** value='<%# Eval("ClientId") %>'/>                                 </ItemTemplate>
</asp:TemplateField>

В коде позади добавьте обработчик события OnCheckChanged, чтобы выбрать или отменить выбор всех:

protected void chkboxSelectAll_CheckedChanged(object sender, EventArgs e)
    {
        CheckBox ChkBoxHeader = (CheckBox)ClientMatchGridView.HeaderRow.FindControl("chkboxSelectAll");
        foreach (GridViewRow row in ClientMatchGridView.Rows)
        {
            CheckBox ChkBoxRows = (CheckBox)row.FindControl("CheckMergedClient");
            if (ChkBoxHeader.Checked == true)
            {
                ChkBoxRows.Checked = true;
            }
            else
            {
                ChkBoxRows.Checked = false;
            }
        }
    }

Answer 4

$('#<%=gvSurveys.ClientID %>').find('input[Id*="chkCatA"]:checkbox').each(function() {
            if (this != chk) {
                this.checked = chk.checked;
            }
        });

Answer 5

Измените флажки selectAll, чтобы иметь тот же класс. Затем извлеките класс из флажка и используйте его как часть селектора, отфильтровывая выбор. Это сильно упростит ситуацию, поскольку вы знаете, что все совпадающие входы просто должны будут получить проверенное значение из параметра.

function SelectAllCheckboxesA(chk) {
    var $chk = $(chk);
    var myClass = $chk.attr('class');
    $('#<%=gvSurveys.ClientID %>')
       .find("input." + myClass + ":checkbox" )
       .not($chk)
       .attr('checked', $chk.attr('checked') );  
}