Javascript 在jQuery中多个复选框和展开折叠

我正在开发一个管理UI，其中用户管理页面的设计如下：和

模块|
子模块1

项目1



项目
项目

子模块2

项目
项目

子模块3

项目
项目
项目
项目
项目
项目
项目



项目
项目
项目
项目

子模块4

项目
项目
项目



项目
项目
项目

子模块5

项目
项目
项目
项目
项目
项目

子模块6

项目
项目
验证者
项目
项目

子模块7

项目

子模块8

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

子模块9

项目
项目

我使用jQuery和IFs以及ELSE语句实现了以下功能，我觉得这不是一个优化的解决方案。所以我想在这里发布一个简单有效的解决方案。非常感谢

功能/要求：

全部展开和全部折叠

当用户单击模块标签或模块复选框时，所有子模块应展开，并选中项目的所有复选框。同样，如果未选中模块上的复选框，则应取消选中子模块上的所有复选框，使其保持展开状态

当用户单击子模块“X”标签或**子模块X复选框**时，应选中所有项复选框，反之亦然

---

这里有一些你可以试试的复选框谢谢你#charlietfl。它有效。：）您好，Charlietfl需要一个与您提供的解决方案相同的更新版本。请勾选此项：以下是您可以在复选框中尝试的内容谢谢您#charlietfl。它有效。：）您好，Charlietfl需要一个与您提供的解决方案相同的更新版本。请检查以下内容：

   <div id="UModules">
  <h2><input type="checkbox" class="checkall" value="" id="CheckAll" name="Mods" /> Modules <span class="all-links"><a id="EAll" href="#" name="EAll">Expand All</a> | <a id="CAll" href="#" name="CAll">Collapse All</a></span></h2>
  <!-- Sub Module 1 Starts -->

  <div class="panel panel-default">
     <div class="panel-heading que activestate">
        <h3 class="panel-title panel-text text-bold"><input type="checkbox" class="cbx" value="" id="pr" name="recev" /> Sub Module 1</h3>
     </div><!-- panel-body starts -->

     <div style="display: block;" class="panel-body pbody ans">
        <ul class="mod1">
           <li><label for="pr1"><input type="checkbox" class="cbx" value="" id="pr1" name="recev[]" /> Item 1</label></li>
        </ul>
        <hr class="spacer-line" />

        <ul class="mod1">
           <li><label for="pr2"><input type="checkbox" class="cbx" value="" id="pr2" name="recev[]" /> Item</label></li>
           <li><label for="pr3"><input type="checkbox" class="cbx" value="" id="pr3" name="recev[]" /> Item</label></li>
        </ul>
     </div><!-- panel-body ends -->
  </div><!-- Sub Module 1 Ends --><!-- Sub Module 2 Starts -->

  <div class="panel panel-default">
     <div class="panel-heading que activestate">
        <h3 class="panel-title panel-text text-bold"><input type="checkbox" class="cbx" value="" id="pt" name="pt" /> Sub Module 2</h3>
     </div><!-- panel-body starts -->

     <div style="display: block;" class="panel-body pbody ans">
        <ul class="mod1">
           <li><label for="pt1"><input type="checkbox" class="cbx" value="" id="pt1" name="pt[]" /> Item</label></li>
           <li><label for="pt2"><input type="checkbox" class="cbx" value="" id="pt2" name="pt[]" /> Item</label></li>
        </ul>
     </div><!-- panel-body ends -->
  </div><!-- Sub Module 2 Ends --><!-- Sub Module 3 Starts -->

  <div class="panel panel-default">
     <div class="panel-heading que activestate">
        <h3 class="panel-title panel-text text-bold"><input type="checkbox" class="cbx" value="" id="disp" name="disp" /> Sub Module 3</h3>
     </div><!-- panel-body starts -->

     <div style="display: block;" class="panel-body pbody ans">
        <ul class="mod1">
           <li><label for="disp1"><input type="checkbox" class="cbx" value="" id="disp1" name="disp[]" /> Item</label></li>
           <li><label for="disp2"><input type="checkbox" class="cbx" value="" id="disp2" name="disp[]" /> Item</label></li>
           <li><label for="disp3"><input type="checkbox" class="cbx" value="" id="disp3" name="disp[]" /> Item</label></li>
           <li><label for="disp4"><input type="checkbox" class="cbx" value="" id="disp4" name="disp[]" /> Item</label></li>
           <li><label for="disp5"><input type="checkbox" class="cbx" value="" id="disp5" name="disp[]" /> Item</label></li>
           <li><label for="disp6"><input type="checkbox" class="cbx" value="" id="disp6" name="disp[]" /> Item</label></li>
           <li><label for="disp7"><input type="checkbox" class="cbx" value="" id="disp7" name="disp[]" /> Item</label></li>
        </ul>
        <hr class="spacer-line" />

        <ul class="mod1">
           <li><label for="disp8"><input type="checkbox" class="cbx" value="" id="disp8" name="disp[]" /> Item</label></li>
           <li><label for="disp9"><input type="checkbox" class="cbx" value="" id="disp9" name="disp[]" /> Item</label></li>
           <li><label for="disp10"><input type="checkbox" class="cbx" value="" id="disp10" name="disp[]" /> Item</label></li>
           <li><label for="disp11"><input type="checkbox" class="cbx" value="" id="disp11" name="disp[]" /> Item</label></li>
        </ul>
     </div><!-- panel-body ends -->
  </div><!-- Sub Module 3 Ends --><!-- Sub Module 4 Starts -->

  <div class="panel panel-default">
     <div class="panel-heading que activestate">
        <h3 class="panel-title panel-text text-bold"><input type="checkbox" class="cbx" value="" id="rr" name="rr" /> Sub Module 4</h3>
     </div><!-- panel-body starts -->

     <div style="display: block;" class="panel-body pbody ans">
        <ul class="mod1">
           <li><label for="rr1"><input type="checkbox" class="cbx" value="" id="rr1" name="rr[]" /> Item</label></li>
           <li><label for="rr2"><input type="checkbox" class="cbx" value="" id="rr2" name="rr[]" /> Item</label></li>
           <li><label for="rr3"><input type="checkbox" class="cbx" value="" id="rr3" name="rr[]" /> Item</label></li>
        </ul>
        <hr class="spacer-line" />

        <ul class="mod1">
           <li><label for="rr4"><input type="checkbox" class="cbx" value="" id="rr4" name="rr[]" /> Item</label></li>
           <li><label for="rr5"><input type="checkbox" class="cbx" value="" id="rr5" name="rr[]" /> Item</label></li>
           <li><label for="rr6"><input type="checkbox" class="cbx" value="" id="rr6" name="rr[]" /> Item</label></li>
        </ul>
     </div><!-- panel-body ends -->
  </div><!-- Sub Module 4 Ends --><!-- Sub Module 5 Starts -->

  <div class="panel panel-default">
     <div class="panel-heading que activestate">
        <h3 class="panel-title panel-text text-bold"><input type="checkbox" class="cbx" value="" id="mm" name="mm" /> Sub Module 5</h3>
     </div><!-- panel-body starts -->

     <div style="display: block;" class="panel-body pbody ans">
        <ul class="mod1">
           <li><label for="mm1"><input type="checkbox" class="cbx" value="" id="mm1" name="mm[]" /> Item</label></li>
           <li><label for="mm2"><input type="checkbox" class="cbx" value="" id="mm2" name="mm[]" /> Item</label></li>
           <li><label for="mm3"><input type="checkbox" class="cbx" value="" id="mm3" name="mm[]" /> Item</label></li>
           <li><label for="mm4"><input type="checkbox" class="cbx" value="" id="mm4" name="mm[]" /> Item</label></li>
           <li><label for="mm5"><input type="checkbox" class="cbx" value="" id="mm5" name="mm[]" /> Item</label></li>
           <li><label for="mm6"><input type="checkbox" class="cbx" value="" id="mm6" name="mm[]" /> Item</label></li>
        </ul>
     </div><!-- panel-body ends -->
  </div><!-- Sub Module 5 Ends --><!-- Sub Module 6 Starts -->

  <div class="panel panel-default">
     <div class="panel-heading que activestate">
        <h3 class="panel-title panel-text text-bold"><input type="checkbox" class="cbx" value="" id="lb" name="lb" /> Sub Module 6</h3>
     </div><!-- panel-body starts -->

     <div style="display: block;" class="panel-body pbody ans">
        <ul class="mod1">
           <li><label for="lb1"><input type="checkbox" class="cbx" value="" id="lb1" name="lb[]" /> Item</label></li>
           <li><label for="lb2"><input type="checkbox" class="cbx" value="" id="lb2" name="lb[]" /> Item</label></li>
           <li><label for="lb3"><input type="checkbox" class="cbx" value="" id="lb3" name="lb[]" /> Verifier</label></li>
           <li><label for="lb4"><input type="checkbox" class="cbx" value="" id="lb4" name="lb[]" /> Item</label></li>
           <li><label for="lb5"><input type="checkbox" class="cbx" value="" id="lb5" name="lb[]" /> Item</label></li>
        </ul>
     </div><!-- panel-body ends -->
  </div><!-- Sub Module 6 Ends --><!-- Sub Module 7 Starts -->

  <div class="panel panel-default">
     <div class="panel-heading que activestate">
        <h3 class="panel-title panel-text text-bold"><input type="checkbox" class="cbx" value="" id="fc" name="fc" /> Sub Module 7</h3>
     </div><!-- panel-body starts -->

     <div style="display: block;" class="panel-body pbody ans">
        <ul class="mod1">
           <li><label for="fc1"><input type="checkbox" class="cbx" value="" id="fc1" name="fc[]" /> Item</label></li>
        </ul>
     </div><!-- panel-body ends -->
  </div><!-- Sub Module 7 Ends --><!-- Sub Module 8 Starts -->

  <div class="panel panel-default">
     <div class="panel-heading que activestate">
        <h3 class="panel-title panel-text text-bold"><input type="checkbox" class="cbx" value="" id="ss" name="ss" /> Sub Module 8</h3>
     </div><!-- panel-body starts -->

     <div style="display: block;" class="panel-body pbody ans">
        <ul class="mod1">
           <li><label for="ss1"><input type="checkbox" class="cbx" value="" id="ss1" name="ss[]" /> Item</label></li>
           <li><label for="ss2"><input type="checkbox" class="cbx" value="" id="ss2" name="ss[]" /> Item</label></li>
           <li><label for="ss3"><input type="checkbox" class="cbx" value="" id="ss3" name="ss[]" /> Item</label></li>
           <li><label for="ss4"><input type="checkbox" class="cbx" value="" id="ss4" name="ss[]" /> Item</label></li>
           <li><label for="ss5"><input type="checkbox" class="cbx" value="" id="ss5" name="ss[]" /> Item</label></li>
           <li><label for="ss6"><input type="checkbox" class="cbx" value="" id="ss6" name="ss[]" /> Item</label></li>
           <li><label for="ss7"><input type="checkbox" class="cbx" value="" id="ss7" name="ss[]" /> Item</label></li>
           <li><label for="ss8"><input type="checkbox" class="cbx" value="" id="ss8" name="ss[]" /> Item</label></li>
           <li><label for="ss9"><input type="checkbox" class="cbx" value="" id="ss9" name="ss[]" /> Item</label></li>
           <li><label for="ss10"><input type="checkbox" class="cbx" value="" id="ss10" name="ss[]" /> Item</label></li>
           <li><label for="ss11"><input type="checkbox" class="cbx" value="" id="ss11" name="ss[]" /> Item</label></li>
           <li><label for="ss12"><input type="checkbox" class="cbx" value="" id="ss12" name="ss[]" /> Item</label></li>
           <li><label for="ss13"><input type="checkbox" class="cbx" value="" id="ss13" name="ss[]" /> Item</label></li>
           <li><label for="ss14"><input type="checkbox" class="cbx" value="" id="ss14" name="ss[]" /> Item</label></li>
        </ul>
     </div><!-- panel-body ends -->
  </div><!-- Sub Module 8 Ends --><!-- Sub Module 9 Starts -->

  <div class="panel panel-default end-of-mod-div">
     <div class="panel-heading que activestate">
        <h3 class="panel-title panel-text text-bold"><input type="checkbox" class="cbx" value="" id="Repo" name="Repo" /> Sub Module 9</h3>
     </div><!-- panel-body starts -->

     <div style="display: block;" class="panel-body pbody ans">
        <ul class="mod1">
           <li><label for="Repo1"><input type="checkbox" class="cbx" value="" id="Repo1" name="Repo[]" /> Item</label></li>
           <li><label for="Repo2"><input type="checkbox" class="cbx" value="" id="Repo2" name="Repo[]" /> Item</label></li>
        </ul>
     </div><!-- panel-body ends -->
  </div><!-- Sub Module 9 Ends -->