In this article I will explain with an example, how to get the checked Nodes of ASP.Net TreeView with Text and Value using JavaScript.
When the Button is clicked, all the CheckBoxes of the ASP.Net TreeView control are referenced using JavaScript and the Text and Value parts of the checked Nodes are displayed using JavaScript Alert Message Box.
 
 
HTML Markup
The HTML Markup consists of a simple ASP.Net TreeView control for which I have set ShowCheckBoxes property to All.
There’s also a Button which has been assigned OnClientClick event handler to call the JavaScript function to get the checked Nodes.
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All">
</asp:TreeView>
<br />
<asp:Button ID="btnGet" runat="server" Text="Get Selected Node" OnClientClick="return GetSelectedNodes();" />
 
 
Populating the ASP.Net TreeView Control
Inside the Page Load event, Nodes are added to the TreeView control using the AddNode function.
The AddNode function accepts the Text and Value of the TreeView Node as parameters.
The Text and Value parts are assigned to the respective properties of the TreeView Node. The Value part is also assigned to the ToolTip property.
Note: The Value part of the TreeView Node is not available on Client Side and hence the Value part is assigned to the ToolTip property and later will be fetched using JavaScript.
 
Finally, the SelectAction property is set to None, so that the TreeView Node is not clickable.
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        TreeView1.Nodes.Add(AddNode("Fruits", "F"));
        TreeView1.Nodes[0].ChildNodes.Add(AddNode("Mango", "1"));
        TreeView1.Nodes[0].ChildNodes.Add(AddNode("Apple", "2"));
        TreeView1.Nodes[0].ChildNodes.Add(AddNode("Pineapple", "3"));
        TreeView1.Nodes[0].ChildNodes.Add(AddNode("Orange", "4"));
        TreeView1.Nodes[0].ChildNodes.Add(AddNode("Grapes", "5"));
 
        TreeView1.Nodes.Add(AddNode("Vegetables", "V"));
        TreeView1.Nodes[1].ChildNodes.Add(AddNode("Carrot", "6"));
        TreeView1.Nodes[1].ChildNodes.Add(AddNode("Cauliflower", "7"));
        TreeView1.Nodes[1].ChildNodes.Add(AddNode("Potato", "8"));
        TreeView1.Nodes[1].ChildNodes.Add(AddNode("Tomato", "9"));
        TreeView1.Nodes[1].ChildNodes.Add(AddNode("Onion", "10"));
    }
}
 
private TreeNode AddNode(string text, string value)
{
    return new TreeNode
    {
        Text = text,
        Value = value,
        ToolTip = value,
        SelectAction = TreeNodeSelectAction.None
    };
}
 
 
Get Checked Nodes of ASP.Net TreeView control using JavaScript
Inside the following JavaScript function, first the ASP.Net TreeView control is referenced and then all its CheckBoxes are referenced.
A loop is executed over all the CheckBoxes of the ASP.Net TreeView control and if the CheckBox is checked, its Text part is fetched from the SPAN element in the Node while the Value part is fetched from the title attribute of the CheckBox.
Finally, the Text and Value parts of all checked Nodes of the ASP.Net TreeView control are displayed using JavaScript Alert Message Box.
<script type="text/javascript">
    function GetSelectedNodes() {
        var selected = "";
        //Reference the TreeView.
        var tree = document.getElementById("<%=TreeView1.ClientID %>");
 
        //Reference the CheckBoxes in TreeView.
        var checkboxes = tree.getElementsByTagName("INPUT");
 
        //Loop through the CheckBoxes.
        for (var i = 0; i < checkboxes.length; i++) {
            //If CheckBox is checked.
            if (checkboxes[i].checked) {
                //Fetch the Text from the adjacent SPAN element.
                var text = checkboxes[i].nextSibling.innerHTML;
 
                //Fetch the Value from the Title(ToolTip) of CheckBox.
                var value = checkboxes[i].title;
                selected += text + " " + value + "\n";
            }
        }
 
        if (selected != "") {
            alert(selected);
        }
 
        return false;
    }
</script>
 
 
Screenshot
ASP.Net TreeView: Get Checked Nodes with Text and Value using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code