以下两种方法哪个不报错就用哪个。用法都是在TreeView标签中加入OnClick="",然后引入函数名即可

第一种方法:(摘自:http://www.cnblogs.com/freeliver54/archive/2007/09/04/881024.html)

<script type ="text/javascript" >
        function postBackByObject() {
            var o = window.event.srcElement;
            if (o.tagName == "INPUT" && o.type == "checkbox") //点击treeview的checkbox是触发
            {
                DoCheck(o, 0);
            }

}
        function DoCheck(o, panduan) {
            if (panduan == 0) {
                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;//字节点的状态和父节点的状态相同,即达到全选
                        }

}

}
            }
            //点子节点的时候,使父节点的状态改变,即不为全选
            {
                var divid = null;
                try {
                    divid = o.parentElement.parentElement.parentElement.parentElement.parentElement; //子节点所在的div
                }
                catch (ex) {
                    document.write(ex.description);
                }
                if (divid == null) {
                    return;
                }
                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++;
                        break;
                    }
                }

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

}
</script>

第二种方法(摘自:http://www.jb51.net/article/21808.htm)

<script type ="text/javascript" >
 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) {
            //自动处理上级
            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);
            }
        }
</script>

用JS实现点击TreeView根节点复选框全选的更多相关文章

  1. js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...

  2. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  3. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  5. FineReport——JS二次开发(复选框全选)

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

  6. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  7. JS实现自定义工具类,隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

  8. js实现复选框全选

    HTML代码如下: <div> <label><input type="checkbox" name="aAll">全选&l ...

  9. JS实战 · 复选框全选操作

    思路: 1.获取被选中checkbox,通过checked属性的状态完成: 2.获取被选中的checkbox的value值: 3.求所有value的和sum: 4.定义span区域存储和sum:   ...

随机推荐

  1. Spring 实现发送电子邮件的两种方法

     1.通过xml文件配置主要属性: xml文件:test.xml <bean id="mailSender" class="org.springframewor ...

  2. 【LeetCode】汇总

    此贴为汇总贴 673. Number of Longest Increasing Subsequence 075. Sort Colors 009. Palindrome Number 008. St ...

  3. List,ArrayList

    List是一个接口,而ListArray是一个类. ListArray继承并实现了List. 所以List不能被构造,但可以向上面那样为List创建一个引用,而ListArray就可以被构造. Lis ...

  4. CAN总线过载帧

    过载帧 过载帧与主动错误帧具有相同的格式.但是,过载帧只能在帧间间隔产生,因此可通过这种方式区分过载帧和错误帧(错误帧是在帧传输时发出的).过载帧由两个字段组成,即过载标志和随后的过载定界符.过载标志 ...

  5. Vue.js:事件处理器

    ylbtech-Vue.js:事件处理器 1.返回顶部 1. Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on <div id="app"> &l ...

  6. python学习(十三) 数据库支持

    13.1 Python数据库编程接口(API) 13.1.1 全局变量 13.1.2 异常 13.1.3 连接和游标 13.1.4 类型 13.2 SQLite和PySQlite 13.2.1 入门 ...

  7. mysql整数类型

    数值类型 1.整数类型 整型类型的后面的宽度,不是存储宽度,是显示宽度,不够位数用0添加,够位数使用原数据 整数类型:TINYINT SMALLINT MEDIUMINT INT BIGINT 作用: ...

  8. catkin 工作空间 - Package 组成

    package 是 ROS 软件的基本组织形式,ROS 就是由一个个的 package 组成的 package 是 catkin 的编译基本单元 一个 package 可以包含多个可执行文件(节点) ...

  9. PHP函数(三)-递归函数

    递归函数就是函数本身在内部调用自己 <?php function DiGui($n){ echo $n."  "; if($n>0) DiGui($n-1); else ...

  10. CRF++评测脚本CoNLL 2000

    关于CRF++工具如何使用这里就不再赘述了,网上相关资源很多,如官方提供的http://crfpp.googlecode.com/svn/trunk/doc/index.html.虽然http://w ...