jquery - jqueryを使用してasp.netツリービューでリーフノードのオン/オフをチェックするにはどうすればよいですか

Question

ルートノードの下にいくつかのノードとその子ノードを持つツリービューがあります。各ノードでチェックボックスを有効にしています。私が必要とするのは、ユーザーが親ノードをチェックするときに、そのノードの下のすべての子ノードをチェックする必要があることです (チェックを外すのと同様)。JQueryを使用してこれを実現したいと考えています。

どんな助けでも大歓迎です。

あなたの時間と知恵を共有してくれてありがとう。

Answer 1

You could try the following, taken from the 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);
    });
});