用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: ...
随机推荐
- Linux修复磁盘操作
Linux修复磁盘操作 1.卸载分区 umount /data 修复磁盘,先判读是磁盘坏了,还是文件系统坏了:一般可以修复,但是建议换磁盘. 2.fsck -y /dev/sda1 ##-y 参数 ...
- Pycharm安装工具包
1.在settings->Project Interpreter->configure interpreters->Install中可以找到所有的模块. PyCharm IDE会帮助 ...
- Oracle 错误: sp2 0734 unknown command beginning -- 解决方法
今天在做一个Oracle的倒库操作,使用SQLPLUS倒库的时候发生SP2 0734的错误 !! 注:我是用的是Ocale11g自带的SQLPLUS 由于之前在工具(SQL Developer)里面运 ...
- linux lcd设备驱动剖析一
s3c2440 lcd驱动源码文件是:drivers/video/s3c2410fb.c 看驱动源码首先当然是先看入口函数,这里是s3c2410fb_init函数 [cpp] view plain? ...
- pymysql增删改查
#!/usr/bin/env python # encoding: utf-8 # Date: 2018/6/24 # 1.增删改import pymysql conn = pymysql.conn ...
- mysql表的增删改查
一.表介绍 表相当于文件,表中的一条记录就相当于文件的一行内容,不同的是,表中的一条记录有对应的标题,称为表的字段 id,name,qq,age称为字段,其余的,一行内容称为一条记录 二.创建表 cr ...
- highcharts钻取例子
<!doctype html> <html lang="en"> <head> <script type="text/javas ...
- 初识 Julia
Ubuntu 下安装 Julia 环境 sch01ar@ubuntu:~$ sudo apt install julia 安装完成后打开 Julia 的交互式会话 sch01ar@ubuntu:~$ ...
- kali下安装go环境
1.安装go 下载安装包,命令:wget -c https://storage.googleapis.com/golang/go1.8.3.linux-amd64.tar.gz 下载完后,解压到 /u ...
- 完整部署OpenStack-memcache配置
一.[root@openstack-server ~]# nova listERROR (CommandError): You must provide a username or user id v ...