Javascript 实现TreeView CheckBox全选效果

 更新时间:2010年01月11日 23:44:32   作者:  
Javascript 实现TreeView CheckBox 选中父节点时所有子节点全选,取消时全部取消
复制代码 代码如下:

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);
}
}


CS文件中注册JavaScript:
复制代码 代码如下:

void Page_Load(object sender,EventArgs e)
{
this.TreeView.Attribute.Add("onclick","OnTreeNodeChecked()");
}

相关文章

  • js实现小时钟效果

    js实现小时钟效果

    这篇文章主要为大家详细介绍了js实现小时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 关于webpack代码拆分的解析

    关于webpack代码拆分的解析

    本篇文章主要介绍了关于webpack代码拆分的解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • js字符串的各种格式的转换 ToString,Format

    js字符串的各种格式的转换 ToString,Format

    平时我们经常会需要将字符转换为各种不同的格式,例如钱:0元需要转换为0.00显示;需要转换为16进制显示的数,这样的例子有很多
    2011-08-08
  • js对table的td进行相同内容合并示例详解

    js对table的td进行相同内容合并示例详解

    正如标题所言如何对table的td进行相同内容合并,下面为大家详细介绍下使用js是如何做到的,感兴趣的朋友不要错过
    2013-12-12
  • 跟我学习javascript的执行上下文

    跟我学习javascript的执行上下文

    跟我学习javascript的执行上下文,读完本文后,你应该清楚了解释器做了什么,为什么函数和变量能在声明前使用以及它们的值是如何决定的,需要了解这些内容的朋友可以参考下
    2015-11-11
  • Bootstrap进度条组件知识详解

    Bootstrap进度条组件知识详解

    在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧
    2016-05-05
  • JS+JSP checkBox 全选具体实现

    JS+JSP checkBox 全选具体实现

    本文为大家介绍下使用JS+JSP实现checkBox全选,下面有个不错的示例,感兴趣的朋友可以参考下
    2014-01-01
  • bootstrap 弹出框modal添加垂直方向滚轴效果

    bootstrap 弹出框modal添加垂直方向滚轴效果

    这篇文章主要介绍了bootstrap 弹出框modal添加垂直方向滚轴效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • JS debug跳过的7种方法总结

    JS debug跳过的7种方法总结

    在JS开发过程中,代码可能存在一些语法或者逻辑上的错误,导致程序不能得到我们想要的结果,这时就需要我们找到并修复这些错误,我们将查找和修复错误的过程称为调试或代码调试,这篇文章主要给大家介绍了关于JS debug跳过的7种方法,需要的朋友可以参考下
    2023-07-07
  • js版扫雷实现代码 原理不错

    js版扫雷实现代码 原理不错

    前一段时间在图书馆看了本关于JavaScript的书,上面讲怎样用js编推箱子小游戏。我想,那扫雷也当然能编出来,然后就用DW试了试,结果如下。
    2009-11-11

最新评论