In this article I will explain with an example, how to check and uncheck all (select unselect all) child node CheckBox or CheckBoxes of ASP.Net TreeView control using JavaScript and jQuery.
The idea is to attach the Client Side JavaScript click event handler using jQuery to all CheckBoxes inside the TreeView control and then when some CheckBox is clicked then based on whether it is Child or Parent CheckBox appropriate action is taken.
The script provided in this article works in dual way i.e. it Checks unchecks child CheckBoxes when parent CheckBox is checked or unchecked. While when all the child CheckBoxes are checked then the Parent CheckBox is checked and when even one Child CheckBox is unchecked the Parent CheckBox is unchecked.
Some more articles on TreeView:-
HTML Markup
The HTML Markup consists of a simple ASP.Net TreeView control for which I have set ShowCheckBoxes property to All.
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All">
</asp:TreeView>
Populating the ASP.Net TreeView Control
Below is the code to populate the ASP.Net TreeView control, where I have added some dummy values of Fruits and Vegetables.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TreeView1.Nodes.Add(new TreeNode("Fruits", "Fruits"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Mango", "Mango"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Apple", "Apple"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Pineapple", "Pineapple"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Orange", "Orange"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("Grapes", "Grapes"));
TreeView1.Nodes.Add(new TreeNode("Vegetables", "Vegetables"));
TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Carrot", "Carrot"));
TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Cauliflower", "Cauliflower"));
TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Potato", "Potato"));
TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Tomato", "Tomato"));
TreeView1.Nodes[1].ChildNodes.Add(new TreeNode("Onion", "Onion"));
}
}
Check Uncheck all Child CheckBoxes when Parent CheckBox is Checked or Unchecked using JavaScript
Below is the client side scripting which will help us achieve the Check Uncheck CheckBoxes functionality in ASP.Net TreeView.
I have made use of jQuery to reduce the JavaScript code and also to make it compatible with multiple browsers.
JavaScript Click event handler has been assigned to each CheckBox inside the TreeView control. When some CheckBox is checked or unchecked the event handler is executed and firstly it is decided whether the CheckBox is Parent CheckBox or Child CheckBox.
If the CheckBox is Parent CheckBox and if it is checked or unchecked the child CheckBoxes are checked or unchecked.
If the CheckBox is a Child CheckBox then its nearby CheckBoxes are scanned and if they all are checked then the Parent CheckBox is checked and if anyone or more of them are unchecked then the Parent CheckBox is unchecked.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=TreeView1] input[type=checkbox]").bind("click", function () {
var table = $(this).closest("table");
if (table.next().length > 0 && table.next()[0].tagName == "DIV") {
//Is Parent CheckBox
var childDiv = table.next();
var isChecked = $(this).is(":checked");
$("input[type=checkbox]", childDiv).each(function () {
if (isChecked) {
$(this).attr("checked", "checked");
} else {
$(this).removeAttr("checked");
}
});
} else {
//Is Child CheckBox
var parentDIV = $(this).closest("DIV");
if ($("input[type=checkbox]", parentDIV).length == $("input[type=checkbox]:checked", parentDIV).length) {
$("input[type=checkbox]", parentDIV.prev()).attr("checked", "checked");
} else {
$("input[type=checkbox]", parentDIV.prev()).removeAttr("checked");
}
}
});
})
</script>
Screenshot
![TreeView Check Uncheck all CheckBoxes ( CheckBox ) using JavaScript and jQuery in ASP.Net]()
Demo
Downloads
