Javascript 实现TreeView CheckBox全选效果_javascript技巧
程序员文章站
2022-05-26 15:30:44
...
复制代码 代码如下:
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 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 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()");
}
推荐阅读
-
JavaScript实现全选取消效果
-
Javascript实现CheckBox的全选与取消全选的代码
-
用JavaScript(js)实现复选框效果(全选、全不选、反选)!
-
javascript中的缓动效果实现程序_javascript技巧
-
JS实现简单的顶部定时关闭层效果_javascript技巧
-
利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧
-
javascript suggest效果 自动完成实现代码分享_javascript技巧
-
原生Js实现按的数据源均分时间点幻灯片效果(已封装)_javascript技巧
-
用javascript来实现动画导航效果的代码_javascript技巧
-
用CSS+JS实现的进度条效果效果_javascript技巧