Question

我在父元素和子元素中有一个带有复选框的嵌套列表视图。我想编写一个jquery来选中所有子复选框，当选中父复选框时，当选中所有子复选框时，应选中父复选框。我无法使用JQuery找到子元素名称。它给了我最后一个List绑定的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>

Answer 1

试用此代码

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

Answer 2

$('.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;
                    })
                });
            });

在嵌套列表视图中使用复选框。父复选框使用JQuery选中所有子复选框

2 个答案: