用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: ...
随机推荐
- gradle 命令行
1. 帮助 ./gradlew -h 2. gradle 可执行tasks gradle tasks or ./gradlew tasks 3. gradle help 任务 帮助了解每个task 的 ...
- jfrog artifactory jenkins pipeline 集成
1. 预备环境 artifactory ( 开源版本 ) maven jenkins jenkins artifactory plugin (在插件管理安装即可) 2. 配置artifactory ...
- 一个苹果证书如何多次使用——导出p12文件[多台电脑使用]
为什么要导出.p12文件 当我们用大于三个mac设备开发应用时,想要申请新的证书,如果在我们的证书里,包含了3个发布证书,2个开发证书,可以发现再也申请不了开发证书和发布证书了(一般在我们的证书界面中 ...
- (转)android - anim translate中 fromXDelta、toXDelta、fromYDelta、toXDelta属性
2012-03-23 15:51 16144人阅读 评论(5) 收藏 举报 android <set xmlns:android="http://schemas.android.com ...
- mysql 执行批量的sql
<?xml version="1.0" encoding="utf-8" ?> <dbconfig> <!-- 数据库驱动 --& ...
- fragment在水平/垂直时的应用
直接看代码 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedIns ...
- SpringBean生命周期
Spring作为当前Java最流行.最强大的轻量级框架,受到了程序员的热烈欢迎.准确的了解Spring Bean的生命周期是非常必要的.我们通常使用ApplicationContext作为Spring ...
- 关于urlDecode和tomcat一些源码
1. 看下面源码,找到%号,每次加2,然后将16进制转换为int,也就是%号后两位加2得到16进制,转换为int ) < numChars) && (c=='%')) { ,i+ ...
- FPGA各大厂商,不可不知
引言: FPGA市场前景诱人,但是门槛之高在芯片行业里无出其右.全球有60多家公司先后斥资数十亿美元,前赴后继地尝试登顶FPGA高地,其中不乏英特尔.IBM.德州仪器.摩托罗拉.飞利浦.东芝.三星这样 ...
- 有趣的java小项目------猜拳游戏
package com.aaa; //总结:猜拳游戏主要掌握3个方面:1.人出的动作是从键盘输入的(System.in)2.电脑是随机出的(Random随机数)3.双方都要出(条件判断) import ...