原生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>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_12" value="12" onclick="moduleClick(this);">
                                            三级节点12</label>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_13" value="13" onclick="moduleClick(this);">
                                            三级节点13</label>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_14" value="14" onclick="moduleClick(this);">
                                            三级节点14</label>&nbsp;&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                           <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_15" value="15" onclick="moduleClick(this);">
                                            三级节点15</label>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_16" value="16" onclick="moduleClick(this);">
                                            三级节点16</label>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_17" value="17" onclick="moduleClick(this);">
                                            三级节点17</label>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_18" value="18" onclick="moduleClick(this);">
                                            三级节点18</label>&nbsp;&nbsp;
                                        </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>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_22" value="22" onclick="moduleClick(this);">
                                            三级节点22</label>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_23" value="23" onclick="moduleClick(this);">
                                            三级节点23</label>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_24" value="24" onclick="moduleClick(this);">
                                            三级节点24</label>&nbsp;&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                           <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_25" value="25" onclick="moduleClick(this);">
                                            三级节点25</label>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_26" value="26" onclick="moduleClick(this);">
                                            三级节点26</label>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_27" value="27" onclick="moduleClick(this);">
                                            三级节点27</label>&nbsp;&nbsp;
                                        </td>
                                        <td width="120">
                                               <label><input type="checkbox" class="borrowModuleD" name="borrowModuleD" id ="moduleD_28" value="28" onclick="moduleClick(this);">
                                            三级节点28</label>&nbsp;&nbsp;
                                        </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>

　　效果图如下

原文地址：https://www.cnblogs.com/liunianfeiyu/p/9434051.html

时间： 2024-11-12 17:12:35

原生js实现三级复选框的相关文章

原生js实现的复选框的全选和全不选效果

原生js实现的复选框的全选和全不选效果:使用jquery实现复选框的全选和全部选效果非常的简单,这里就不介绍了,具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节,下面介绍一下如何使用原生javascript实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

js获取checkbox复选框获取选中的选项

js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现: var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field);

Js动态添加复选框Checkbox的实例方法!!!

首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement("input"); checkBox.setAttribute("type","checkbox"); checkBox.setAttribute("id",'123456'); 但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用 document.createTe

JS下拉复选框的实现

<html>   <head>     <script src="jquery-1.7.2.min.js"></script>     <script src="jquery.easyui.min.js" ></script>     <link   rel="stylesheet" href="css/themes/metro/easyui.css"

js实现多级复选框的交互

功能介绍 整个复选框是包含多级,可能有父级,可能有子级,在勾选复选框时,要做两种判断: 1要判断它下面有没有子级,有子级将子级的选中状态checked变得和自己一样. 2要判断它是否有父级,有父级勾选时判断同级兄弟是否都是选中状态,如果选中将父级勾选上:取消勾选时将父级的勾选状态变为false 复选框交互要实现的效果如下: 实现思路说明 1.设计一种方式让我们知道谁是自己的父级谁是自己的子级.我是用的<input>的name和id值标识的.子级的name值等于父级的id值 2.checkone

js自定义修改复选框单选框样式，清除复选框单选框默认样式

之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认样式进行修改,但发现,并没有可以重置效果的方法,之前用过-webkit-appearance的方法,但是这个只在webkit内核的浏览器里面生效,火狐不生效. 所以自己写了个js,用li来模拟复选框和单选框的效果,很简单,7行就行. 效果图:  涉及到的知识点:自定义属性来存储点击状态和原来的class名 h

JS/Jquery根据复选框的&lt;checked属性&gt;控制多个对应div的显示/隐藏

<!doctype html><html> <head> <meta charset="utf-8"> <title>JS/Jquery复选框控制多个对应div的显隐</title> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> </head> <

Ionic Js四：复选框

ionic 复选框(checkbox)与普通的 HTML 复选框没什么区别,以下实例演示了 ionic 复选框 ion-checkbox 的应用. <ion-checkbox ng-model="isChecked">复选框标签</ion-checkbox> 实例中,会根据复选框是否选中,修改 checked 值,true 为选中, false 为未选中. HTML 代码 <ion-header-bar class="bar-positive&q

JS获取页面复选框选中的值

function jqchk(){ //jquery获取复选框值 var chk_value =[]; $('input[class="sel"]:checked').each(function(){ chk_value.push($(this).val()); }); if(chk_value.length==0){ alert('请先勾选您要删除的内容'); return; } console.log(chk_value); var msg = "您真的确定要删除吗?\n