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