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控件中添加触发事件:οnclick="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>

 

转载于:https://www.cnblogs.com/superchen/archive/2012/04/09/2438431.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值