原生js实现三级复选框
工作中要做一个三级的复选框，用js实现了一下，从项目中把相关代码抽取出来了，有相关需求的可以参考一下。亲测可用。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>三级复选框</title>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0" class="grid">
<colgroup>
<col width="100" align="center"/>
<col width="500"/>
</colgroup>
<tr>
<td><label><input type="checkbox" id="DModuleCheckAll" onclick="borrowModuleCheckAll(this)" />一级节点</label></td>
<td>
<table width="100%" border="1" cellpadding="0" cellspacing="0" class="grid">
<colgroup>
<col width="100" align="center"/>
<col width="500"/>
</colgroup>
<tr>
<td><label><input type="checkbox" name="DModuleDescCheckAll" onclick="borrowModuleDescCheckAll(this)" />二级节点1</label></td>
<td><table width="100%" border="1" cellpadding="0" cellspacing="0" class="grid">
<tr>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_11" value="11" onclick="moduleClick(this);">
三级节点11</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_12" value="12" onclick="moduleClick(this);">
三级节点12</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_13" value="13" onclick="moduleClick(this);">
三级节点13</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_14" value="14" onclick="moduleClick(this);">
三级节点14</label>
</td>
</tr>
<tr>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_15" value="15" onclick="moduleClick(this);">
三级节点15</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_16" value="16" onclick="moduleClick(this);">
三级节点16</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_17" value="17" onclick="moduleClick(this);">
三级节点17</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_18" value="18" onclick="moduleClick(this);">
三级节点18</label>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><label><input type="checkbox" name="DModuleDescCheckAll" onclick="borrowModuleDescCheckAll(this)" />二级节点2</label></td>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="grid">
<tr>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_21" value="21" onclick="moduleClick(this);">
三级节点21</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_22" value="22" onclick="moduleClick(this);">
三级节点22</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_23" value="23" onclick="moduleClick(this);">
三级节点23</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_24" value="24" onclick="moduleClick(this);">
三级节点24</label>
</td>
</tr>
<tr>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_25" value="25" onclick="moduleClick(this);">
三级节点25</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_26" value="26" onclick="moduleClick(this);">
三级节点26</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_27" value="27" onclick="moduleClick(this);">
三级节点27</label>
</td>
<td width="120">
<label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_28" value="28" onclick="moduleClick(this);">
三级节点28</label>
</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
/**
* 三级复选框，一级可以全选，全不选所有节点；二级可以全选全不选对应三级节点，当原来是全选所有节
* 点时，不选择二级节点会导入一级节点，对应三级节点取消选中，当原来是除了一个二级节点未选满其它
* 二三级节点选满时，选中惟一的一个未选满的二级节点会使一级节点也被选中；若只有一个三级节点未选
* 中，选中该三级节点，会导致对应的二级节点和一级节点被选中，若某二级节点下的三级节点全被选择，取
* 消选择一个三级节点，会使对应二级节点被取消选中。
* 下级节点的选中或不选可能会导致对应上级节点的选择状态发生改变。上级节点的选中或不选一定会导致
* 对应下级节点的选择状态发生变化。
*/ //模拟从后台取的数据，初始化checkbox的选中状态
var initCheck = ["11", "12", "13", "14", "15", "16", "17", "18", "21", "22"];
for(var i = 0; i < initCheck.length; i++){
if(document.getElementById("moduleD_" + initCheck[i])){
document.getElementById("moduleD_" + initCheck[i]).checked = true;
}
}
initModuleCheck(document.getElementById("DModuleCheckAll")); function initModuleCheck(station){
if(null != station){
var descs = document.getElementsByName("DModuleDescCheckAll");
if(null != descs && descs.length > 0){
for(var i = 0; i < descs.length; i++){
var descCheck = true;
var descTrs = descs[i].parentNode.parentNode.nextElementSibling.firstElementChild.firstElementChild.children;
if(null != descTrs && descTrs.length > 0){
for(var j = 0; j < descTrs.length; j++){
var descTds = descTrs[j].children;
if(null != descTds && descTds.length > 0){
for(var k = 0; k < descTds.length; k++){
var checkItem = descTds[k].firstElementChild.firstElementChild;
if(!checkItem.checked){
descCheck = false;
break;
}
} if(!descCheck){
break;
}
}
}
} if(descCheck){
descs[i].checked = true;
}
}
} if(null != descs && descs.length > 0){
stationCheck = true;
for(var i = 0; i < descs.length; i++){
if(!descs[i].checked){
stationCheck = false;
break;
}
} if(stationCheck){
station.checked = true;
}
}
}
} // 一级节点的选取
function borrowModuleCheckAll(self){
var checkStatus = self.checked;
var trs = self.parentNode.parentNode.nextElementSibling.firstElementChild.lastElementChild.children;
if(null != trs && trs.length > 0){
for(var i = 0; i < trs.length; i++){
var subTrs = trs[i].lastElementChild.firstElementChild.firstElementChild.children;
for(var j = 0; j < subTrs.length; j++){
var subTds = subTrs[j].children;
for(var k = 0; k < subTds.length; k++){
var tdCheckbox = subTds[k].firstElementChild.firstElementChild;
tdCheckbox.checked = checkStatus;
}
}
}
} var descs = document.getElementsByName("DModuleDescCheckAll");
if(null != descs && descs.length > 0){
for(var i = 0; i < descs.length; i++){
descs[i].checked = checkStatus;
}
}
} // 二级节点的选取
function borrowModuleDescCheckAll(self){
var checkStatus = self.checked;
var trs = self.parentNode.parentNode.nextElementSibling.firstElementChild.firstElementChild.children;//获取所有当前工作站tr节点
if(null != trs && trs.length > 0){
for(var i = 0; i < trs.length; i++){
var tds = trs[i].children;
for(var j = 0; j < tds.length; j++){
var tdCheckbox = tds[j].firstElementChild.firstElementChild;
tdCheckbox.checked = checkStatus;
}
}
} if(!checkStatus){
document.getElementById("DModuleCheckAll").checked = checkStatus;
}else{
var descs = document.getElementsByName("DModuleDescCheckAll");
if(null != descs && descs.length > 0){
var descAllCheck = true;
for(var i = 0; i < descs.length; i++){
if(descs[i] != self && !descs[i].checked){
descAllCheck = false;
break;
}
} if(descAllCheck){
document.getElementById("DModuleCheckAll").checked = checkStatus;
}
}
}
} // 三级节点的选取
function moduleClick(self){
var checkStatus = self.checked;
var desc = self.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.previousElementSibling.firstElementChild.firstElementChild;
if(!checkStatus){
desc.checked = checkStatus;
document.getElementById("DModuleCheckAll").checked = checkStatus;
}else{
var trs = self.parentNode.parentNode.parentNode.parentNode.children;
if(null != trs && trs.length > 0){
var allTdCheck = true;
for(var i = 0; i < trs.length; i++){
var tds = trs[i].children;
if(null != tds && tds.length > 0){
for(var j = 0; j < tds.length; j++){
checkItem = tds[j].firstElementChild.firstElementChild;
if(checkItem != self && !checkItem.checked){
allTdCheck = false;
break;
}
} if(!allTdCheck){
break;
}
}
}
} if(allTdCheck){
desc.checked = checkStatus;
} if(desc.checked){
var descs = document.getElementsByName("DModuleDescCheckAll");
if(null != descs && descs.length > 0){
var descAllCheck = true;
for(var i = 0; i < descs.length; i++){
if(descs[i] != desc && !descs[i].checked){
descAllCheck = false;
break;
}
} if(descAllCheck){
document.getElementById("DModuleCheckAll").checked = checkStatus;
}
}
}
}
}
</script>
</body>
</html>
效果图如下
原生js实现三级复选框的更多相关文章
- js获取checkbox复选框获取选中的选项
js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...
- Js动态添加复选框Checkbox
Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...
- 用js判断一个复选框是否被选中
<html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> ...
- js自定义修改复选框单选框样式，清除复选框单选框默认样式
之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...
- js实现多级复选框的交互
功能介绍 整个复选框是包含多级,可能有父级,可能有子级,在勾选复选框时,要做两种判断: 1要判断它下面有没有子级,有子级将子级的选中状态checked变得和自己一样. 2要判断它是否有父级,有父级 ...
- js操作checkbox(复选框)的方法总结
收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...
- JS获取页面复选框选中的值
function jqchk(){ //jquery获取复选框值 var chk_value =[]; $('input[class="sel"]:checked').each(f ...
- Ionic Js四：复选框
ionic 复选框(checkbox)与普通的 HTML 复选框没什么区别,以下实例演示了 ionic 复选框 ion-checkbox 的应用. <ion-checkbox ng-model= ...
- JS实现带复选框的下拉菜单
这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...
随机推荐
- FastAdmin 怎么把模块设置默认的首页?
F4NNIU: 参考 ThinkPHP5 的路由设置. fangke-河南: 或者看config.php Karson:需要把插件设置为默认首页吗?在后台就可以,设置他插件的为伪静态,即可.
- tomcat源码阅读之StandardContext
Context实例表示一个具体的web应用程序,其中包含一个或者多个Wrapper实例,每个Wrapper表示一个具体的servlet定义.StandardContext类是Context接口的标准实 ...
- LOJ 6053 简单的函数——min_25筛
题目:https://loj.ac/problem/6053 min_25筛:https://www.cnblogs.com/cjyyb/p/9185093.html 这里把计算 s( n , j ) ...
- tyvj1172自然数拆分
题目:http://www.joyoi.cn/problem/tyvj-1172 非常水的完全背包.物品就是1~n这n个数. 第6行有橙色的警告:this decimal constant is un ...
- sqlvarchar后自动填充空格解决办法（SET ANSI_PADDING）
SET ANSI_PADDING http://www.yesky.com/imagesnew/software/tsql/ts_set-set_2uw7.htm http://www.makaido ...
- Linux内核编译：很少有人提及的一些内容
1. 你可以使用O=参数将编译结果放到其他位置(非源代码目录),例如:make O=~/build ... 这样做的好处是你的源代码目录不会受到任何改变:你甚至可以在不同的体系结构间共享源代码. 注意 ...
- 介绍了如何取成员函数的地址以及调用该地址:C++
摘要:介绍了如何取成员函数的地址以及调用该地址. 关键字:C++成员函数 this指针 调用约定 一.成员函数指针的用法 在C++中,成员函数的指针是个比较特殊的东西.对普通的函数指针来说,可以视为一 ...
- httpclient 用户名密码认证实例
import java.io.IOException; import java.util.ArrayList; import java.util.List; import org.apache.com ...
- python logging 日志模块的配置和使用
import logging logging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s[line:%(line ...
- win7连接centos的nfs
nfs的服务端这边设置忽略. 主要关于权限的问题: Windows7 NFS客户端,使用mount命令挂载NFS服务之后,文件系统对Win7只读,无法写入文件,无法新建文件夹解决方法. 在win的cm ...