原生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 ...
随机推荐
- BLE 4.1 和 BLE 4.2
BLE 4.2 比 BLE4.1 多了一些新的特性. Low-power IP (IPv6/6LoWPAN) Bluetooth Smart Internet Gateways (GATT) http ...
- 单变量微积分笔记20——三角替换1（sin和cos）
sin和cos的常用公式 基本公式: 半角公式: 微分公式: 积分公式: 三角替换 示例1 根据微分公式,cosxdx = dsinx 示例2 示例3 半角公式 示例1 示例2 解法1: 解法2: 综 ...
- k最邻近算法——使用kNN进行手写识别
上篇文章中提到了使用pillow对手写文字进行预处理,本文介绍如何使用kNN算法对文字进行识别. 基本概念 k最邻近算法(k-Nearest Neighbor, KNN),是机器学习分类算法中最简单的 ...
- java中<load-on-startup>含义
java中 load-on-startup 含义 java中的 load-on-startup 用于表示该servlet是否在servlet容器启动的时候加载. 示例: <load-on-sta ...
- ASP.NET Core 2.0 使用支付宝PC网站支付实现代码（转）
最近在使用ASP.NET Core来进行开发,刚好有个接入支付宝支付的需求,百度了一下没找到相关的资料,看了官方的SDK以及Demo都还是.NET Framework的,所以就先根据官方SDK的源码, ...
- jmeter ---模拟http请求/发送gzip数据
jmeter中get请求gzip数据的方法: 在jmeter线程组中添加“http信息头管理器”,并添加名称:Accept-Encoding值: gzip,deflate注:HTTP信息头Accept ...
- mySQL 教程 第2章 安装和介绍mySQL
设置mySQL字符集 支持中文的字符集是utf8,该设置可以更改mySQL配置文件进行全局设置,也可以针对数据库设置,也可以针对表设置,也可以针对列设置.字符集更改后新插入的数据生效,对以前不生效. ...
- Go随机数的使用
随机数使用比较广泛,例如,抽奖.均衡等等. 下面简单说明其使用方法. Example1 package main import ( "log" "math/rand&qu ...
- wsdl详解
<wsdl:definitions xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:ns1="http:// ...
- asp.net 模拟CURL调用微信公共平台API 上传下载多媒体文
近公司项目上在开发微信服务号的接口,需要给用户回复图片或语音或视频,这个时候就需要用到 上传下载多媒体文件接口,微信在这方面推荐采用的是开源函数库curl实现的,CURL项目包括很多版本,我主要测试的 ...