Parent checkbox selected on selecting child in javascript in asp.net
Sample Treeview 1: On selecting last option in treeview
Sample Treeview 2: On selecting child "under 4" its parent checked automatically.
1) Add the following script
<script type="text/javascript"> function OnTreeClick(evt) { var src = window.event != window.undefined ? window.event.srcElement : evt.target; var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox"); if (isChkBoxClick) { var parentTable = GetParentByTagName("table", src); var nxtSibling = parentTable.nextSibling; //check if nxt sibling is not null & is an element node if (nxtSibling && nxtSibling.nodeType == 1) { if (nxtSibling.tagName.toLowerCase() == "div") //if node has children { //check or uncheck children at all levels CheckUncheckChildren(parentTable.nextSibling, src.checked); } } //check or uncheck parents at all levels CheckUncheckParents(src, src.checked); } } function CheckUncheckChildren(childContainer, check) { var childChkBoxes = childContainer.getElementsByTagName("input"); var childChkBoxCount = childChkBoxes.length; for (var i = 0; i < childChkBoxCount; i++) { childChkBoxes[i].checked = check; } } function CheckUncheckParents(srcChild, check) { var parentTable = GetParentByTagName("table", srcChild); var parentDiv = GetParentByTagName("div", srcChild); var parentNodeTable = parentDiv.previousSibling; if (parentNodeTable) { var checkUncheckSwitch; if (check) //checkbox checked { var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild); if (isAllSiblingsChecked) checkUncheckSwitch = true; else return; //do not need to check parent if any(one or more) child not checked } else //checkbox unchecked { checkUncheckSwitch = false; } var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input"); var child = parentNodeTable.nextSibling; var childChkBoxes = child.getElementsByTagName("input"); var childChkBoxCount = childChkBoxes.length; var checkoption = false; for (var a = 0; a < childChkBoxCount; a++) { if (childChkBoxes[a].checked == true) { checkoption = true; } } if (inpElemsInParentTable.length > 0) { var parentNodeChkBox = inpElemsInParentTable[0]; parentNodeChkBox.checked = checkoption; //do the same recursively CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch); } } } function AreAllSiblingsChecked(chkBox) { var parentDiv = GetParentByTagName("div", chkBox); var childCount = parentDiv.childNodes.length; for (var i = 0; i < childCount; i++) { if (parentDiv.childNodes[i].nodeType == 1) { //check if the child node is an element node if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") { var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0]; //if any of sibling nodes are not checked, return false // if (!prevChkBox.checked) { // return false; // } } } } return true; } //utility function to get the container of an element by tagname function GetParentByTagName(parentTagName, childElementObj) { var parent = childElementObj.parentNode; while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) { parent = parent.parentNode; } return parent; } </script>
2) Add the following code on code behind
TreeView1.Attributes.Add("onclick", "OnTreeClick(event)");