使用 bootstrap 动态单击父复选框 Accordiance

Question

当我点击父复选框时，该特定父复选框中的所有子复选框都应该是 checked.but .请让我知道我哪里出错了。

这是我的 HTML：

<div class="wrapper row-offcanvas row-offcanvas-left"> 

  <!-- Right side column. Contains the navbar and content of the page -->
  <aside class="right-side"> 
    <!-- Content Header (Page header) -->
    <section class="content-header">

      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Sample</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row cache-automation"> 
        <!-- left column -->
        <div class="col-md-6"> 
          <!-- Subject Area -->
          <div class="box box-primary">
            <div class="box-header">
              <h3 class="box-title"> Area</h3>
            </div>
            <!-- /.box-header --> 
            <div class="box-body subject1">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                         <input type="checkbox" id="chckHead"  class="chckHead" value="subject1"/>
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Content</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table table-striped">
                                <tr>
                                    <td>
                                        <div class="checkbox">
                                            <input type="checkbox" id="checkbox" class="chcktbl" />
                                            <label for="checkbox">
                                                List group item heading
                                            </label>
                                        </div>


                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox">
                                            <input type="checkbox" id="checkbox" class="chcktbl" />
                                            <label for="checkbox">
                                                List group item heading
                                            </label>
                                        </div>


                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox">
                                            <input type="checkbox" id="checkbox" class="chcktbl" />
                                            <label for="checkbox">
                                                List group item heading
                                            </label>
                                        </div>


                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox">
                                            <input type="checkbox" id="checkbox" class="chcktbl"  />
                                            <label for="checkbox">
                                                List group item heading
                                            </label>
                                        </div>


                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
              <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                          <input type="checkbox" id="chckHead"  class="chckHead" value="subject2"/>
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"> Content</a>
                        </h4>
                    </div>
                    <div id="collapsetwo" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table table-striped">
                                <tr>
                                    <td>
                                        <div class="checkbox">
                                            <input type="checkbox" id="checkbox" class="chcktbl" />
                                            <label for="checkbox">
                                                List group item heading
                                            </label>
                                        </div>


                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox">
                                            <input type="checkbox" id="checkbox" class="chcktbl" />
                                            <label for="checkbox">
                                                List group item heading
                                            </label>
                                        </div>


                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox">
                                            <input type="checkbox" id="checkbox" class="chcktbl" />
                                            <label for="checkbox">
                                                List group item heading
                                            </label>
                                        </div>


                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox">
                                            <input type="checkbox" id="checkbox" class="chcktbl"  />
                                            <label for="checkbox">
                                                List group item heading
                                            </label>
                                        </div>


                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

              </div>
              <!-- /.box-body -->              
              <!--<div class="box-footer text-right"> </div>  -->          
          </div>
        </div>
        <!--/.col (left) --> 
        <!--/.col (right) --> 

      </div>            
    </section>
    <!-- /.content --> 
  </aside>
  <!-- /.right-side --> 
</div>
<!-- ./wrapper -->

我的代码如下所示：

<script type="text/javascript">
 $('.chckHead').on("change", function() {

        if(!$(this).is(":checked")) {
           $(".chcktbl").each( function() {
              $(this).prop("checked" , false);
           });
        }
        else {
          $(".chcktbl").each( function() {
            $(this).prop("checked" , true);
        });
     }
});
</script>

Answer 1

您现有代码的主要问题是检查页面上所有匹配的复选框，而不仅仅是相关的复选框。这是因为您使用选择器 $(".chcktbl") 选择页面上具有 class="chcktbl".

的所有元素

您可以将此类代码简化为：

$('.chckHead').on("change", function() {
    $(".chcktbl").prop('checked', $(this).prop('checked'));
});

因为您还需要将它应用到最近的面板，请使用 closest('.panel') 和 find() 来本地化匹配项：

$('.chckHead').on("change", function () {
    $(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/wak1991z/

更新：

如果您希望 checkall 按钮也反映个人选择，您也可以这样做：

// Also make the checkall reflect the all checked state
$('.panel').on('change', '.chcktbl', function () {
    $(this).closest('.panel').find(".chckHead").prop('checked', $(this).closest('.panel').find('.chcktbl:not(:checked)').length == 0);
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/wak1991z/1/

使用 bootstrap 动态单击父复选框 Accordiance

Dynamically click the parent checkbox Accordiance using bootstrap

jquery

html

twitter-bootstrap

更新：