如何使用jquery在asp.net treeview中检查/关闭叶节点

时间:2012-10-31 20:02:53

标签: jquery asp.net treeview

我有一个树视图,其中有几个节点及其子节点位于根节点下。我为每个节点启用了复选框。我需要的是当用户检查父节点时,应检查该节点下的所有子节点(类似于取消选中)。 我想用JQuery实现这个目标。

非常感谢任何帮助。

感谢您分享您的时间和智慧。

1 个答案:

答案 0 :(得分:3)

您可以尝试以下内容,取自asteranup's answer

<form id="form1" runat="server">
    <asp:TreeView ID="LinksTreeView" Font-Name="Arial" ForeColor="Blue" InitialExpandDepth="2"
        ShowCheckBoxes="Parent,Leaf" runat="server">
        <LevelStyles>
            <asp:TreeNodeStyle ChildNodesPadding="10" Font-Bold="true" Font-Size="12pt" ForeColor="DarkGreen" />
            <asp:TreeNodeStyle ChildNodesPadding="5" Font-Bold="true" Font-Size="10pt" />
            <asp:TreeNodeStyle ChildNodesPadding="5" Font-Underline="true" Font-Size="10pt" />
            <asp:TreeNodeStyle ChildNodesPadding="10" Font-Size="8pt" />
        </LevelStyles>
        <Nodes>
            <asp:TreeNode Text="Table of Contents" SelectAction="None">
                <asp:TreeNode Text="Chapter One">
                    <asp:TreeNode Text="Section 1.0">
                        <asp:TreeNode Text="Topic 1.0.1" />
                        <asp:TreeNode Text="Topic 1.0.2" />
                        <asp:TreeNode Text="Topic 1.0.3" />
                    </asp:TreeNode>
                    <asp:TreeNode Text="Section 1.1">
                        <asp:TreeNode Text="Topic 1.1.1" />
                        <asp:TreeNode Text="Topic 1.1.2" />
                        <asp:TreeNode Text="Topic 1.1.3" />
                        <asp:TreeNode Text="Topic 1.1.4" />
                    </asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="Chapter Two">
                    <asp:TreeNode Text="Section 2.0">
                        <asp:TreeNode Text="Topic 2.0.1" />
                        <asp:TreeNode Text="Topic 2.0.2" />
                    </asp:TreeNode>
                </asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="Appendix A" />
            <asp:TreeNode Text="Appendix B" />
            <asp:TreeNode Text="Appendix C" />
        </Nodes>
    </asp:TreeView>
  </form>

<强>的Javascript

$(document).ready(function() {
    ("div[id $= LinksTreeView] input[type=checkbox]").click(function() {           
        $(this).closest("table").next("div").find("input[type=checkbox]").attr("checked", this.checked);
    });
});