Question

I have a treeview with several nodes and their child nodes under root node. I am having checkbox enabled for each node. What i need is when user checks on parent node all the child nodes under that node should be checked on (similar for uncheck).
I want to achieve this using JQuery.

Any help is greatly appreciated.

Thanks for sharing your time and wisdom.

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