复选框父级和子级的联动
来源：互联网 发布：法语官方国家知乎 编辑：程序博客网 时间：2024/05/21 17:00
具体功能就是实现当子级被选中时相应的父级也被选中、当父级以下的所有子级被取消时实现父级也被取消、利用JS实现、是经过网上看到的代码进行部分修改而成、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";>
<html xmlns=";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框实验</title>
<style type="text/css">
ul { list-style:none; }
</style>
<script type="text/javascript">
window.onload = function()
{ var obj = document.getElementById('demo').getElementsByTagName('input');
for (var i = 0; i < obj.length; i ++)
{ obj[i].onclick = function() { //查找并选择/取消选择所有子项
var childrenObj = this.parentNode.getElementsByTagName('ul');
if (childrenObj.length > 0)
{ for (var j = 0;
j < childrenObj.length; j ++)
{ var o = childrenObj[j].getElementsByTagName('input');
for (var k = 0; k < o.length; k ++)
o[k].checked = this.checked; }
} //递归方法检查并设置父选项选择状态
checkParent(this);
} } }
function checkParent(obj)
{ var parentObj = obj.parentNode.parentNode;
if (parentObj.id != 'demo')
{ parentObj = parentObj.parentNode; var FLAG = false; // true表示父级选项的所有子选项存在选中的，初始值为false，假设全部未选中
var o = parentObj.getElementsByTagName('input');
for (var i = 1; i < o.length; i ++)
{ if (o[i].checked) { FLAG = true; break; }
}
if (FLAG) o[0].checked = true;
else o[0].checked = false; if (parentObj.parentNode.parentNode.id != 'demo')
checkParent(o[0]); } }
</script>
</head>
<body>
<form id="weaver" name="frmmain" method="get">
<ul id="demo">
<li><input type="checkbox" />A1
<ul>
<li><input type="checkbox" />A1__B1</li>
<li><input type="checkbox" />A1__B2
<ul>
<li><input type="checkbox" />A1__B2__C1
<ul>
<li><input type="checkbox" />A1__B2__C1__D1</li>
<li><input type="checkbox" />A1__B2__C1__D2</li>
</ul>
</li>
<li><input type="checkbox" />A1__B2__C2</li>
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" />A2
<ul>
<li><input type="checkbox" />B</li>
</ul>
</li>
</ul>
</form>
</body>
</html>
具体效果动手试一下、突然发现我不会添加图片、0_o
- 复选框父级和子级的联动
- 扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）
- 扩展TreeView控件(1) - 联动复选框（复选框的全选和取消全选）
- 扩展TreeView控件(1) - 联动复选框（复选框的全选和取消全选）
- 扩展GridView控件(4) - 联动复选框（复选框的全选和取消全选）
- 两个复选框的联动效果
- 购物车里的二级联动的复选框全选和总计
- 工作记录1：extJS-checkboxgroup复选框和combo联动
- jq实现复选框全选和反全选以及子复选框的状态改变父复选框状态的方法
- jQuery 版的 CheckBox 复选框成组联动（JavaScript）
- 为TreeView添加复选框 以及复选框的联动....吐血奉献 虽然不是原创
- jquery实现复选框联动
- MFC TreeControl复选框：选中某个节点的复选框后，自动选中子节点的复选框
- 是点击总分类的复选框，自动选择所有子分类的复选框
- Extjs tree 实现父节点和子节点联动
- TabPageIndicator和ViewPager的联动
- viewpager和fragment的联动
- Edittext和TextView的联动
- 一个不会言谈的程序员，惊奇发现自己能力的多么的优秀
- 快速搭建Ubuntu更新源服务器
- cocos2d-x 写游戏（1）
- 运营学习笔记一 运营各环节分析
- the Marvelous Land of Oz 12.9%
- 复选框父级和子级的联动
- 快速理解Docker - 容器级虚拟化解决方案
- 0719
- sqoop 从mysql导入hive的字段名称问题
- 文本分类之情感分析– 停用词和惯用语
- 升级金士顿固态硬盘SV200S3固件，还原其应有的速度
- Java 内存分配全面浅析
- LeetCode2.2.3 @ Partition List 链表划分 D3F3
- LUA技巧集合
