Выбрать все флажки в GridView ASP.NET с помощью JQuery

Question

У меня есть checkBoxes в моих столбцах храма Gridview, называемых «Категория A» и «Категория B». Мне нужна функция «Выбрать все», то есть когда пользователь проверяет флажок «Выбрать все» в столбце категории «А», все флажки должны быть отмечены под этим столбцом. То же самое для категории B. Я пытаюсь с кодом ниже. Проблема с моим кодом заключается в том, что он выбирает все флажки во всем gridview, «Категория 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

Почему вы не выбрать только Флажки из Категорияа:

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

будет работать?

Answer 2

Измените флажки 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')); 
} 

Answer 3

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

Answer 4

Это основан на решении предложенного 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 скрипт, поместите его в $ (документ) .ready, например:

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 5

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

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