使用嵌套列表视图中的复选框.父复选框使用JQuery选择所有子复选框

Using checkbox in nested listview. Parent checkbox selects all child checkbox using JQuery

本文关键字：复选框选择 JQuery 嵌套列表视图更新时间：2023-09-26

我有一个嵌套的列表视图，在父元素和子元素中都有复选框。我想写一个jquery，当父复选框被选中时，选择所有的子复选框，当所有的子框都被单独选中时，父复选框应该被选中。我无法使用JQuery找到子元素名称。它给了我最后一个列表绑定的elementId。以下是代码片段：

<div id="div1">
    <asp:UpdatePanel runat="server" ID="upQuestionGroup">
        <ContentTemplate>
            <asp:ListView ID="lvGroup" runat="server" DataKeyNames="ID">
                <LayoutTemplate>
                    <table ID="tableGroupList">
                        <tr>
                            <th>Choose Questions</th>
                        </tr>
                        <tr runat="server" id="itemPlaceholder"></tr>
                    </table>
                </LayoutTemplate>
                <ItemTemplate>
                    <tr id="QuestionGroupName">
                        <asp:Label runat="server" ID="lblGroupId" Text='<%#Eval("ID") %>' Visible="false"></asp:Label>
                        <td>
                            <asp:Label runat="server" ID="lblQuestionGroup" Text='<%#Eval("Name")%>' />
                        </td>
                        <td>
                           <asp:CheckBox runat="server" ID="chkCrcAuditGroup" onclick="javascript:ChkAllItems(this);" />
                        </td>
                    </tr>
                    <tr id="tableQuestion">
                        <td>
                            <div id="QuestionList">
                                <asp:UpdatePanel runat="server" ID="upQuestionList">
                                    <ContentTemplate>
                                        <asp:ListView ID="lvQuestionList" runat="server" DataKeyNames="ID">
                                            <LayoutTemplate>
                                                <table ID="tableQuestionList">
                                                    <tr runat="server" id="itemPlaceholder"></tr>
                                                </table>
                                            </LayoutTemplate>
                                            <ItemTemplate>
                                                <tr>
                                                    <td>
                                                        <asp:Label runat="server" ID="lblQuestion" Text='<%#eval("question")%>'></asp:Label>
                                                    </td>
                                                    <td>
                                                        <input runat="server" id="chkSelectQuestion" type="checkbox" value='<%#Eval("ID")%>' />
                                                    </td>
                                                </tr>
                                            </ItemTemplate>
                                        </asp:ListView>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </div>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:ListView>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

尝试此代码

JavaScript

function ChkAllItems() { var grdControl = document.getElementById('lvQuestionList'); var GrdInputs = grdControl.getElementsByTagName("input"); var ChkAll = document.getElementById('<%=chkCrcAuditGroup.ClientID%>'); for (var i = 0; i < GrdInputs.length; ++i) { if (ChkAll.checked == true) { GrdInputs[i].checked = true; } else { GrdInputs[i].checked = false; } } }

$('.yourClass').click(function(){
                $('input[type=checkbox]').click(function () {
                    // children checkboxes depend on current checkbox
                    $(this).next().find('input[type=checkbox]').prop('checked',this.checked);
                    // go up the hierarchy - and check/uncheck depending on number of children checked/unchecked
                    $(this).parents('ul').prev('input[type=checkbox]').prop('checked',function(){
                        return $(this).next().find(':checked').length;
                    })
                });
            });