TreeView 复选框联动
function OnTreeNodeChecked(event) { var ele = event.target || event.srcElement; if (ele.type == 'checkbox') { ele.className = ""; var childrenDivID = ele.id.replace('CheckBox', 'Nodes'); var div = document.getElementById(childrenDivID); if (div != null) { var checkBoxs = div.getElementsByTagName('INPUT'); for (var i = 0; i < checkBoxs.length; i++) { if (checkBoxs[i].type == 'checkbox') checkBoxs[i].checked = ele.checked; } } setParentClassName(ele); } } function setParentClassName(currCheckBox) { var objParentNode = public_GetParentNode(currCheckBox); if (public_IsObjectNull(objParentNode)) return; var checkBoxs = objParentNode.getElementsByTagName("INPUT"); var allSelect = true; var allUnSelect = false; for (var i = 0; i < checkBoxs.length; i++) { if (checkBoxs[i].type == 'checkbox') { if (checkBoxs[i].checked) allUnSelect = false; else allSelect = false; if ((!allSelect) && (!allUnSelect)) break; } } var objParentCheckBox = public_Node2CheckBox(objParentNode); if (public_IsObjectNull(objParentCheckBox)) return; setParentClassName(objParentCheckBox); if (allSelect) { objParentCheckBox.className = ""; objParentCheckBox.checked = true; return; } if (allUnSelect) { objParentCheckBox.className = ""; objParentCheckBox.checked = false; return; } objParentCheckBox.checked = false; objParentCheckBox.className = "parentbox_style"; } //得到本节点所在的Node(Div对象) function public_GetParentNode(element) { var parent = element.parentNode; var upperTagName = "DIV"; //如果这个元素还不是想要的tag就继续上溯 while (parent && (parent.tagName.toUpperCase() != upperTagName)) { parent = parent.parentNode ? parent.parentNode : parent.parentElement; } return parent; } function public_Node2CheckBox(element) { var objID = element.getAttribute("ID"); objID = objID.substring(0, objID.indexOf("Nodes")); return document.getElementById(objID + "CheckBox"); } function public_IsObjectNull(element) { if (element == null || element == "undefined") return true; else return false; } </script>
在TreeView控件中添加触发事件:onclick="OnTreeNodeChecked(event)"
稍作修改可以自己看下修改后的效果
<script language="javascript" type="text/javascript"> function OnTreeNodeChecked(event) { var ele = event.target || event.srcElement; if (ele.type == 'checkbox') { ele.className = ""; var childrenDivID = ele.id.replace('CheckBox', 'Nodes'); var div = document.getElementById(childrenDivID); if (div != null) { var checkBoxs = div.getElementsByTagName('INPUT'); for (var i = 0; i < checkBoxs.length; i++) { if (checkBoxs[i].type == 'checkbox') checkBoxs[i].checked = ele.checked; } } setParentClassName(ele); } } function setParentClassName(currCheckBox) { var objParentNode = public_GetParentNode(currCheckBox); if (public_IsObjectNull(objParentNode)) return; var checkBoxs = objParentNode.getElementsByTagName("INPUT"); var oneSelect = false; for (var i = 0; i < checkBoxs.length; i++) { if (checkBoxs[i].type == 'checkbox') { if (checkBoxs[i].checked) { oneSelect = true;break; } } } var objParentCheckBox = public_Node2CheckBox(objParentNode); if (public_IsObjectNull(objParentCheckBox)) return; setParentClassName(objParentCheckBox); if (oneSelect) { objParentCheckBox.className = ""; objParentCheckBox.checked = true; return; } objParentCheckBox.checked = false; objParentCheckBox.className = "parentbox_style"; } //得到本节点所在的Node(Div对象) function public_GetParentNode(element) { var parent = element.parentNode; var upperTagName = "DIV"; //如果这个元素还不是想要的tag就继续上溯 while (parent && (parent.tagName.toUpperCase() != upperTagName)) { parent = parent.parentNode ? parent.parentNode : parent.parentElement; } return parent; } function public_Node2CheckBox(element) { var objID = element.getAttribute("ID"); objID = objID.substring(0, objID.indexOf("Nodes")); return document.getElementById(objID + "CheckBox"); } function public_IsObjectNull(element) { if (element == null || element == "undefined") return true; else return false; } </script>