用JS实现点击TreeView根节点复选框全选
以下两种方法哪个不报错就用哪个。用法都是在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根节点复选框全选的更多相关文章
- js进阶 9-16 如何实现多选框全选和取消
js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- FineReport——JS二次开发(复选框全选)
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- JS实现自定义工具类,隔行换色、复选框全选、隔行高亮等
很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中 1.隔行换色 2.复选框的全选效果 3.实现表格 ...
- js实现复选框全选
HTML代码如下: <div> <label><input type="checkbox" name="aAll">全选&l ...
- JS实战 · 复选框全选操作
思路: 1.获取被选中checkbox,通过checked属性的状态完成: 2.获取被选中的checkbox的value值: 3.求所有value的和sum: 4.定义span区域存储和sum: ...
随机推荐
- 模糊聚类算法(FCM)
伴随着模糊集理论的形成.发展和深化,RusPini率先提出模糊划分的概念.以此为起点和基础,模糊聚类理论和方法迅速蓬勃发展起来.针对不同的应用,人们提出了很多模糊聚类算法,比较典型的有基于相似性关系和 ...
- 洛谷 P2212 [USACO14MAR]浇地Watering the Fields
传送门 题解:计算欧几里得距离,Krusal加入边权大于等于c的边,统计最后树的边权和. 代码: #include<iostream> #include<cstdio> #in ...
- Xcode 打开playground文件的时候提示-Unable to find execution service for selected run destination
解决办法: step 1: 关闭Xcode (快捷键cmd + q) step 2:在terminal里面运行如下语句 rm -rf ~/Library/Developer/CoreSimulator ...
- iconfont阿里字体图标的使用方法
我们在做web项目的时候,之前比较常用的是bootstrap,所以使用font awesome字体图标比较多,无意中在一个项目中接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常 ...
- Oracle GoldenGate理论
1Oracle GoldenGate处理方法和支持的数据库Oracle GoldenGate在多样和异构的基础IT平台中,可以在事务级别上进行数据交换和数据操作.在保证交易完整性和最小的开销的条件下, ...
- Eclipse 进入前选择Workspace
如果选择了默认的Workspace会有一个问题. 打开一个workspace的时候,再次打开eclipse会报错,提示当前workspace正在被使用,然后让选择workspace. 最好的方法是每次 ...
- Nginx安装过程
1. 首先 ./configure --prefix=/usr/common/nginx --with-http_stub_status_module 报如下错误: 2. 从报的错可以看出缺少pcre ...
- 搭建Dynamic Web Project(动态web项目)的springmvc工程1
本文转载自:http://blog.csdn.net/typa01_kk/article/details/45902955 此篇创建Dynamic Web Projec工程(动态web项目),下一篇, ...
- codeforces 985E Pencils and Boxes(dp+思维)
E. Pencils and Boxes time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- Java-Maven-Runoob:Maven 项目文档
ylbtech-Java-Maven-Runoob:Maven 项目文档 1.返回顶部 1. Maven 项目文档 本章节我们主要学习如何创建 Maven 项目文档. 比如我们在 C:/MVN 目录下 ...