用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: ...
随机推荐
- Spring 实现发送电子邮件的两种方法
1.通过xml文件配置主要属性: xml文件:test.xml <bean id="mailSender" class="org.springframewor ...
- 【LeetCode】汇总
此贴为汇总贴 673. Number of Longest Increasing Subsequence 075. Sort Colors 009. Palindrome Number 008. St ...
- List,ArrayList
List是一个接口,而ListArray是一个类. ListArray继承并实现了List. 所以List不能被构造,但可以向上面那样为List创建一个引用,而ListArray就可以被构造. Lis ...
- CAN总线过载帧
过载帧 过载帧与主动错误帧具有相同的格式.但是,过载帧只能在帧间间隔产生,因此可通过这种方式区分过载帧和错误帧(错误帧是在帧传输时发出的).过载帧由两个字段组成,即过载标志和随后的过载定界符.过载标志 ...
- Vue.js:事件处理器
ylbtech-Vue.js:事件处理器 1.返回顶部 1. Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on <div id="app"> &l ...
- python学习(十三) 数据库支持
13.1 Python数据库编程接口(API) 13.1.1 全局变量 13.1.2 异常 13.1.3 连接和游标 13.1.4 类型 13.2 SQLite和PySQlite 13.2.1 入门 ...
- mysql整数类型
数值类型 1.整数类型 整型类型的后面的宽度,不是存储宽度,是显示宽度,不够位数用0添加,够位数使用原数据 整数类型:TINYINT SMALLINT MEDIUMINT INT BIGINT 作用: ...
- catkin 工作空间 - Package 组成
package 是 ROS 软件的基本组织形式,ROS 就是由一个个的 package 组成的 package 是 catkin 的编译基本单元 一个 package 可以包含多个可执行文件(节点) ...
- PHP函数(三)-递归函数
递归函数就是函数本身在内部调用自己 <?php function DiGui($n){ echo $n." "; if($n>0) DiGui($n-1); else ...
- CRF++评测脚本CoNLL 2000
关于CRF++工具如何使用这里就不再赘述了,网上相关资源很多,如官方提供的http://crfpp.googlecode.com/svn/trunk/doc/index.html.虽然http://w ...