jquery checkbox的三级联动

2021-05-14 09:35:36 阅读：187 来源： 互联网

标签：jquery function checkbox checked 信息管理 prop parents 联动 find

代码：

<!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">
         <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>
    
         <script type="text/javascript">         window.jQuery || document.write("<script src='../assets/js/jquery.min.js'>" + "<" + "/script>");     </script>
    
    

    <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>

标签：jquery,function,checkbox,checked,信息管理,prop,parents,联动,find
来源： https://www.cnblogs.com/guohanting/p/14767181.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jquery checkbox的三级联动