原生js实现三级复选框

最新推荐文章于 2020-07-08 13:27:25 发布
最新推荐文章于 2020-07-08 13:27:25 发布
阅读量343 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liunianfeiyu/p/9434051.html
版权

　　工作中要做一个三级的复选框，用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

QQ40153258
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript实现简单实用的三选框
09-08
重写window.confirm()，构造三个选择项的弹出框
jQuery实现统计复选框选中数量
10-25
HTML部分包含三个复选框和一个按钮，它们的`name`属性都设置为`check`，这样在JavaScript中可以通过这个名字来选择它们。当用户点击“选中个数”按钮时，`countNum`函数会被调用，显示选中复选框的数量。 这种实现...
jq 三级复选框操作
weixin_34160277的博客
05-29 215
$("input:checkbox.grandfather").click(function () { if ($(this).prop("checked") == true) { $(this).parents("li").eq(0).find("input:checkbox").prop("checked",...
React三层多选框联动/三级复选框联动实现方法 (Vue同理数据驱动思想)
前端一线搬运工的博客
04-18 4122
效果如图: 代码如下(有ant design就可以跑了): import { Checkbox, Collapse } from 'antd'; import React, { PureComponent } from 'react'; //假设这是后端返回的数据 const params = { "authTree": [ { "authName": "商场...
js复选框，三层结构
bansha1495的博客
03-19 171
最终实现效果如下 html+css如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link re...
JS下拉选择框实现省市区（县）三级联动
热门推荐
Ms_WangH
07-19 6万+
来自网络： https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new 效果图   实现 项目结构： city.js https://blog.csdn.net/qq_26416195/article/details/8111...
layui复选框的全选与取消实现方法
10-16
一级复选框用于控制所有二级复选框的状态，而二级复选框则代表具体的权限选项。 ```html 客户管理 客户管理" lay-filter="checkbox_v1"> []" type="checkbox" value="意向" class="checkbox1" lay-...
jQuery下拉列表复选框
03-09
3. **checkselect.js**：这是一个JavaScript文件，将包含我们自定义的jQuery扩展方法，用于实现下拉列表复选框的功能。 在`checkselect.js`中，我们可能要做的事情包括： - 选择HTML中的下拉列表元素（`<select>`）...
jQuery单选框复选框美化代码.zip
05-16
1. CSS样式覆盖：原生的单选框和复选框在不同浏览器中样式各异，且难以自定义。通过CSS，我们可以为这些元素添加自定义背景图、边框、阴影等，使其符合整体设计风格。 2. 使用`:checked`伪类：jQuery允许我们根据...
HTML移动端省市区三级联动，完美适配Android和IOS
12-20
然而，根据描述，这个插件是纯原生JS实现的，所以开发者需要自行处理这些兼容性问题。 在CSS方面，我们需要为这些下拉列表提供合适的样式，确保在不同设备上显示正常。考虑到移动设备的屏幕大小，可能需要将下拉...
javascript 多级checkbox选择效果
10-29
多级checkbox选择效果,具体的效果可以看下面的图，有需要的朋友可以参考下。
jQuery多级复选框checkbox选中代码
06-10
jQuery多级复选框checkbox选中代码，支持水平横向与垂直纵向排列，共有3种排列样式，具体看演示。
js多级联动多选checkbox插件
08-10
js多级联动多选checkbox插件
CheckBox分级选中 复选框 上下级 联动
04-09
CheckBox分级选中 复选框 上下级 联动
javascript实现checkbox多级选择
09-28
js实现checkbox多级选择，不过，还有一点小BUG，支持3级，若想支持无限级，需要改动
利用js实现多个复选框反选或全选
weixin_47065927的博客
07-08 896
利用js实现多个复选框反选或全选 在表单里面有时会出现多个复选框，一个个地选不是很方便，可通过一个按钮进行快速选择，使用更方便。通过一个简单的demo实现这一功能。 step1.创建项目文件夹，命名为demos. step2.在文件夹中创建html文件，命名为demo-1.html。并写好基本的结构代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></ti
前端三级checkbox选择 / JS三级checkbox选择 / JS三级勾选
qq_29755359的博客
11-09 1979
前端三级checkbox选择
原生JS无限级树形菜单（兼容各浏览器）
01-10
原生JS写的无限级树形菜单(包含文件：otree.js,otree.css,demo.html,demo1.html,imgs/ )，兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器，以及360/搜狗等其他各浏览器。 可动态添加/删除节点，启用/不启用复选框，启用连线或不连线，支持自定义ICON图标，可获取当前选中节点参数及父级目录树，可用作级联下拉树菜单等。 可获取HTML中li列表自动生成树菜单（可用作网站多级分类目录） 更多功能参见demo.html和demo1.html
HTML5手机端三级联动城市选择代码
07-03
移动端省市区三级联动，非select，固定底部，滑动选择省市区，在手机上效果就是点击区域，底部出现省市区选择，并排显示，滑动选择
js实现input复选框取消选中
最新发布
05-25
如果是原生的 HTML input 复选框，可以通过获取该元素，然后将其 `checked` 属性设置为 `false` 实现： ```js var checkbox = document.getElementById("myCheckbox"); checkbox.checked = false; ``` 如果是使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值