代码：
<!-- * @Descripttion: your project * @version: 1.0 * @Author: guohanting * @Date: 2021-05-13 17:17:26 * @LastEditors: Please set LastEditors * @LastEditTime: 2021-05-14 09:17:20 --> <!DOCTYPE html> <html lang="en"><head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <title>Blank Page - Ace Admin</title> <script src="js/jquery-2.1.4.min.js"></script>
<meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style> .listbox { width: 100%; border: 1px solid #ccc; overflow: hidden; margin-bottom: 5px; } .listleft { float: left; border-right: 1px solid #ccc; width: 200px; padding: 5px 10px; } .listright { float: left; width: auto; padding: 5px 10px; } </style> </head>
<body class="no-skin">
<!-- PAGE CONTENT BEGINS --> <div class="page-header"> <h1> 表格 <small> <i class="ace-icon fa fa-angle-double-right"></i> checkbox 三级联动 </small> </h1> </div>
<table id="sample-table-1" class="table table-striped table-bordered table-hover dataTable"> <thead id="checkwrap"> <tr> <th class="center "> 全选 <label class="position-relative menu-all"> <input type="checkbox" class="ace check1" /> </label> </th> <th> <div class="listbox"> <div class="listleft"> 亲属信息管理11 <label class="position-relative"> <input type="checkbox" class="ace check2" name="node_ids[]"/> </label> </div> <div class="listright"> 基本信息管理 <label class="position-relative"> <input type="checkbox" class="ace check3" /> </label> 基本信息管理2 <label class="position-relative"> <input type="checkbox" class="ace check3" /> </label> 基本信息管理3 <label class="position-relative"> <input type="checkbox" class="ace check3" /> </label> </div> </div> <div class="listbox"> <div class="listleft"> 亲属信息管理11 <label class="position-relative"> <input type="checkbox" class="ace check2" name="node_ids[]"/> </label> </div> <div class="listright"> 基本信息管理 <label class="position-relative"> <input type="checkbox" class="ace check3" /> </label> 基本信息管理2 <label class="position-relative"> <input type="checkbox" class="ace check3" /> </label> 基本信息管理3 <label class="position-relative"> <input type="checkbox" class="ace check3" /> </label> </div> </div> </th> </tr> </thead>
</table>
<!-- PAGE CONTENT ENDS -->
<!--[if !IE]> --> <script type="text/javascript"> window.jQuery || document.write("<script src='../assets/js/jquery.min.js'>" + "<" + "/script>"); </script>
<!-- <![endif]-->
<!--[if IE]> <script type="text/javascript"> window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>"); </script> <![endif]-->
<script> $(function() { check3(); check2(); check1(); })
function check1() { $('.check1').click(function() { var ok = $(this).prop("checked"); $(this).parents('tr').find("input[type='checkbox']").prop('checked', ok); }) };
function check2() { $('.check2').click(function() { var ok = $(this).prop("checked"); // $(this).parents('.listleft').siblings(). $(this).parents('.listleft').siblings().andSelf().find('.check3').prop("checked", ok); var oCheck2 = $(this).parents('.listbox').siblings().andSelf().find(".check2"); $(this).parents('tr').find('.check1').prop("checked", trueorfalse(oCheck2));
}) }
function check3() { $('.check3').click(function() { var ockeck3 = $(this).parent().siblings().andSelf().find(".check3"); $(this).parents('.listbox').find('.check2').prop("checked", trueorfalse(ockeck3)); var oCheck1 = $(this).parents('.listbox').siblings().andSelf().find('.check2'); $(this).parents('tr').find('.check1').prop("checked", trueorfalse(oCheck1))
}) }
// 找同级元素的checked状态 function trueorfalse(obj) { var bool = false; $(obj).each(function() {
if ($(this).prop("checked")) { bool = true; } }) return bool; } </script> </body>
</html>