Выбрать в 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. Если я установлю флажок ПРОВЕРКА ГОЛОВНОЙ ГОЛОВКИ, будет выбран весь флажок в столбце

3. Шаг 2 для оставшихся двух флажков.

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

Answer 1

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

<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/.

Answer 2

Это должно помочь вам начать.Это будет прослушивать любые проверенные чекбоксы.Если флажок имеет класс 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