Выберите в JQuery

Question

Смотрите следующую разметку,

<div style="width: 30%;"> 
    <asp:Repeater ID="rptParent" runat="server" OnItemDataBound="rptParent_ItemDataBound"> 
     <ItemTemplate> 
      <table id="tblRoleHdr" style="border-style: solid; border-width: 1px; 
       border-color: Red;"> 
       <tr> 
        <td style="width: 1%;"> 
         <asp:CheckBox ID="chkRoleHdr" runat="server" /> 
        </td> 
        <td style="width: 50%;"> 
         <asp:HiddenField ID="hidRoleID" runat="server" Value='<%#Eval("RoleID") %>' /> 
         <asp:Label ID="lblRole" runat="server" Text='<%#Eval("Role") %>'></asp:Label> 
        </td> 
        <td style="width: 1%;"> 
         <asp:CheckBox ID="chkP1Hdr" runat="server" CssClass="chkP1Hdr" /> 
        </td> 
        <td style="width: 1%;"> 
         <asp:CheckBox ID="chkP2Hdr" runat="server" CssClass="chkP2Hdr" /> 
        </td> 
        <td style="width: 1%;"> 
         <asp:CheckBox ID="chkP3Hdr" runat="server" CssClass="chkP3Hdr" /> 
        </td> 
       </tr> 
      </table> 
      <asp:Repeater ID="rptChild" runat="server"> 
       <HeaderTemplate> 
        <table id="tblChild" class="tblChild" style="border-style: solid; border-width: 1px; 
       border-color:Green;"> 
       </HeaderTemplate> 
       <ItemTemplate> 
        <tr> 
         <td style="width: 1%;"> 
          &nbsp;&nbsp;&nbsp;&nbsp; 
         </td> 
         <td style="width: 50%;"> 
          <asp:HiddenField ID="hidUserID" runat="server" Value='<%#Eval("UserID") %>' /> 
          <asp:Label ID="lblUser" runat="server" Text='<%#Eval("User") %>'></asp:Label> 
         </td> 
         <td style="width: 1%;"> 
          <asp:CheckBox ID="chkP1Child" runat="server" CssClass="chkP1Child" /> 
         </td> 
         <td style="width: 1%;"> 
          <asp:CheckBox ID="chkP2Child" runat="server" CssClass="chkP2Child"/> 
         </td> 
         <td style="width: 1%;"> 
          <asp:CheckBox ID="chkP3Child" runat="server" CssClass="chkP3Child" /> 
         </td> 
        </tr> 
       </ItemTemplate> 
       <FooterTemplate> 
        </table> 
       </FooterTemplate> 
      </asp:Repeater> 
     </ItemTemplate> 
     <SeparatorTemplate> 
      <hr /> 
     </SeparatorTemplate> 
    </asp:Repeater> 
</div> 

Это сгенерирует следующий вывод

Что мне нужно сделать в JQuery является

1. Если я поставлю флажок, отмеченный красным цветом, все флажки, принадлежащие группе, будут выбраны.

2. Если я проверить СИНИЙ HEADER Check Box, то все флажок в столбце будет выбран

3. Шаг 2 для остальных двух флажков.

Не могли бы вы посмотреть классы, которые я указал для флажков. Как выполнить задачу с помощью jQuery?

Answer 1

Это должно вас начать. Это будет прослушивать любые чекбокс, которые будут проверяться. Если флажок имеет класс chkP1Hdr, и он проверен, он проверяет все дети chkP1Child.

$("input[type='checkbox']").change(function() { 
    if ($(this).hasClass("chkP1Hdr") && this.checked) 
     $(".chkP1Child").attr("checked", true); 
    if ($(this).hasClass("chkP2Hdr") && this.checked) 
     $(".chkP2Child").attr("checked", true); 
    if ($(this).hasClass("chkP3Hdr") && this.checked) 
     $(".chkP3Child").attr("checked", true); 
}); 

И так далее для 2 и 3

Answer 2

Если вы можете изменить разметку немного, вы можете использовать некоторые дополнительные классы и данных- атрибуты, чтобы получить эффект, который вы хотите. Во-первых, каждый флажок, который должен быть автоматически выбран группой/столбцом, будет иметь класс группового уровня и/или столбца. Например:

<input type="checkbox" class="groupA column3" /> 

Далее, заголовок флажков все должны совместно использовать общий класс, который может быть целенаправленным с JQuery и данных- атрибутами, чтобы связать их вместе с флажками, они должны контролировать.

<input type="checkbox" class="groupHeading" data-group="GroupA" /> 
<input type="checkbox" class="columnHeading" data-group="GroupA" data-column="Column3" /> 

С помощью этой информации jQuery может сделать все остальное.

// Handle group heading change 
$('.groupHeading').change(function() { 
    // Set checked state to all checkboxes with class matching data-group 
    $('.'+$(this).data('group')).attr('checked', $(this).is(':checked')); 
}); 

// Handle column heading change 
$('.columnHeading').change(function() { 
    // Set checked state to all checkboxes with class matching data-group and data-column 
    $('.'+$(this).data('group')+'.'+$(this).data('column')).attr('checked', $(this).is(':checked')); 
}); 

Рабочий стол приведен в http://jsfiddle.net/eKxJm/1/.