原生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 ...
随机推荐
- Oracle RAC 归档 与 非归档 切换
Oracle 的生产库都是启动在归档模式下,RAC下归档非归档的切换和单实例也是一样的,都是在MOUNT模式下执行ALTER DATABASE ARCHIVELOG/NOARCHIVELOG;命令. ...
- JUC线程池之 Callable和Future
Callable 和 Future 简介 Callable 和 Future 是比较有趣的一对组合.当我们需要获取线程的执行结果时,就需要用到它们.Callable用于产生结果,Future用于获取结 ...
- ZedGraph控件的使用
http://blog.chinaunix.net/uid-20776117-id-1847015.html 在我们编写程序的时候,有时候是要做一些统计的,为了达到一目了然的效果,饼状图,曲线图,柱状 ...
- 【Reporting Services 报表开发】— 怎么根据当前表单的guid作为参数查询相关数据？
select AId from FilteredA as CRMAF_FilteredA 用这个 作为一个DataSet1 , 然后添加在报表里面添加一个参数 @AId,设置的默认的查询为前面Data ...
- Debug---Eclipse断点调试基础
1.进入debug模式(基础知识列表)1.设置断点 2.启动servers端的debug模式 3.运行程序,在后台遇到断点时,进入debug调试状态 ========================= ...
- string截断
public static string GetFirstString(string stringToSub, int length) { Regex regex ...
- pbuf类型和应用
下面的讨论仅限于RAW API. 按存储方式分类 1. PBUF_RAM 从一般性的Heap中分配.可用空间大小受MEM_SIZE宏控制.可看作一般意义上的动态内存. 用途: a) 将应用层中的待发送 ...
- LwIP raw api下使用tcp keep alive
// The following code is implemented after tcp_new() or in tcp_connected call back... xxx_connected( ...
- 1.环境搭建-mysql+tomcat+myeclipse安装并配置
一.安装mysql数据库并配置 下载地址:https://pan.baidu.com/s/1OJ3ggda7Cthl4GCxWKbTng 密码:sd6b 1.打开安装程序
- python appium增加方法
1.测试过程中发现python client没有拨打电话的方法,因此去添加该方法 1.1查看源码 appium-base-driver/blob/master/lib/protocol/routes. ...