如何使用JavaScript单击复选框来切换asp TreeNode

Question

当您单击复选框时，我想知道如何切换或展开treenode。 取消选中该复选框时，它应该合拢。

根据下面的代码，我有2个节点

• HeadNode1

• HeadNode2

如果用户单击HeadNode1复选框，则应使用javascript向下扩展至其子元素和孙元素。 当他取消选中它时，它应该折叠回去。

下面的屏幕快照显示了单击HeadNode1时的展开视图。

C＃代码

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        TreeNode tNode1 = new TreeNode();
        tNode1.Text = "HeadNode1";
        tNode1.Value = "HeadNode1";

        TreeNode h1ChildNode1 = new TreeNode();
        h1ChildNode1.Text = "Head1Child1";
        tNode1.ChildNodes.Add(h1ChildNode1);

        TreeNode h1GrandChild1 = new TreeNode();
        h1GrandChild1.Text = "Head1Child1Grand1";
        h1ChildNode1.ChildNodes.Add(h1GrandChild1);

        TreeNode h1ChildNode2 = new TreeNode();
        h1ChildNode2.Text = "Head1Child2";
        tNode1.ChildNodes.Add(h1ChildNode2);

        TreeNode h1ChildNode3 = new TreeNode();
        h1ChildNode3.Text = "Head1Child3";
        tNode1.ChildNodes.Add(h1ChildNode3);
        TreeView1.Nodes.Add(tNode1);

        TreeNode tNode2 = new TreeNode();
        tNode2.Text = "HeadNode2";
        tNode2.Value = "HeadNode2";

        TreeView1.Nodes.Add(tNode2);

        ServerSideChangeSelection(TreeView1, true);
        List<TreeNode> nodes = new List<TreeNode>();

        foreach (TreeNode node in TreeView1.Nodes)
        {
            nodes.Add(node);
            if (node.ChildNodes.Count > 0)
            {
                foreach (TreeNode childNode in node.ChildNodes)
                {
                    nodes.Add(childNode);
                }
            }
        }

    }
}

TreeView

 <form id="form1" runat="server">
        <div>
            <asp:TreeView ID="TreeView1" ShowCheckBoxes="All" Showlines="true" runat="server"></asp:TreeView>
            <asp:Button ID="Button1" runat="server" OnClick="Save_Click" Text="Save" />
            <br />
        </div>
    </form>

谢谢您的时间。