JS实现对TreeView的全选

//页面TreeView控件如：<asp:TreeView ID="tvSelectUser" runat="server" ShowCheckBoxes="All" ></asp:TreeView>

//方法一：最简单的全选，取消全选，没有进行递归，没有对子节点进行选择
    function OnTreeNodeChecked1()
    {
        var ele = event.srcElement;
        if (ele.type == 'checkbox')
        {
            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;
                }
            }
        }
    }

//调用方法在Page_Load事件中添加 tvSelectUser.Attributes.Add("onclick", "OnTreeNodeChecked()"); 或者 OnClick="OnTreeNodeChecked1();"

//也可以如：asp:TreeView ID="tvSelectUser" runat="server" ShowCheckBoxes="All"  onclick=OnTreeNodeChecked1()"></asp:TreeView>

 

　//方法二：
    //JS实现treeview中选中父节点，子节点也选中,如果子节点全部选中，自动选中父节点
    //仅支持TreeView
    //调用方法 TreeView.Attributes.Add("onclick", "OnTreeNodeChecked()"); 或者 OnClick="OnTreeNodeChecked();"
    function OnTreeNodeChecked()
    {
        var ele = event.srcElement;
        if(ele.type=='checkbox')
        {
            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;
                }
            }
            OnTreeNodeChildChecked(ele);
                    
        }
    }
   
    function OnTreeNodeChildChecked(ele)
    {
        //递归处理
        if (ele == null)
        {
            ele = event.srcElement;
        }
        var parentDiv = ele.parentElement;//.parentElement.parentElement.parentElement.parentElement;
      
        var parentChkBox=document.getElementById(parentDiv.id.replace('Nodes','CheckBox'));
        if(parentChkBox!=null)
        {
            var ChildsChkAll=true;
            var Boxs = parentDiv.getElementsByTagName('INPUT');
            for(var i=0;i<Boxs.length;i++)
            {
                if(Boxs[i].type=='checkbox'&&Boxs[i].checked==false)
                {
                    ChildsChkAll=false;
                }
            }
            parentChkBox.checked=ChildsChkAll;
            OnTreeNodeChildChecked(parentChkBox);
        }
    }

//调用方法在Page_Load事件中添加 tvSelectUser.Attributes.Add("onclick", "OnTreeNodeChecked()"); 或者 OnClick="OnTreeNodeChecked();"

//也可以如：asp:TreeView ID="tvSelectUser" runat="server" ShowCheckBoxes="All"  onclick=OnTreeNodeChecked()"></asp:TreeView>

 

 

方法三：实现全部选中，当子节点没有选中时，根节点也不选中

function SelectTreeViewNodes()
{
    var o = event.srcElement;
    if (o.tagName == "INPUT" && o.type == "checkbox") //点击treeview的checkbox是触发
    {
        var d = o.id; //获得当前checkbox的id;
        var e = d.replace("CheckBox", "Nodes"); //通过查看脚本信息,获得包含所有子节点div的id
        var div = window.document.getElementById(e); //获得div对象
        if (div != null)  //如果不为空则表示,存在自节点
        {
            var check = div.getElementsByTagName("INPUT"); //获得div中所有的已input开始的标记
            for (i = 0; i < check.length; i++)
            {
                if (check[i].type == "checkbox") //如果是checkbox
                {
                    check[i].checked = o.checked; //字节点的状态和父节点的状态相同,即达到全选
                }

            }

        }
        else  //点子节点的时候,使父节点的状态改变,即不为全选
        {
            var divid = o.parentElement.parentElement.parentElement.parentElement.parentElement; //子节点所在的div

            var id = divid.id.replace("Nodes", "CheckBox"); //获得根节点的id

            var checkbox = divid.getElementsByTagName("INPUT"); //获取所有子节点数
            var s = 0;
            for (i = 0; i < checkbox.length; i++)
            {
                if (checkbox[i].checked)  //判断有多少子节点被选中
                {
                    s++;
                }
            }

            if (s == checkbox.length)  //如果全部选中 或者 选择的是另外一个根节点的子节点 ，
            {                          //    则开始的根节点的状态仍然为选中状态
                window.document.getElementById(id).checked = true;
            }
            else
            {                               //否则为没选中状态
                window.document.getElementById(id).checked = false;
            }

        }

    }

}