javascript - 如果在该 div 中选中了所有子复选框，则选中/取消选中(全选复选框)

Question

让我尝试从图像来解释，

1.预订，客户在租车选项卡下检查。

1. 现在从 Rental vehicles 选项卡中，两者都是从 php 代码中选择的，即(Reservations，Customers)，

2. 所以现在我想在 document.ready 中编写代码来检查 SelectAll_Dynamic(全选复选框)!因为所有内部复选框(预订、客户)都已选中，

3. 如果内部复选框(预订或客户)中的任何人未选中，则应取消选中 SelectAll_Dynamic(全选复选框)。

14是动态的!对于每个新的 div，它都会发生变化，例如:1,4,6,12 unique..

<div id="tabs-14" class="tab-pane  active">  
    <div class="panel-body">
        <div class="row">
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" class="SelectAll_Dynamic" id="14">
                        <b>Select All</b>
                    </label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                    <input type="checkbox" name="pages[]" value="41" checked="">Reservations</label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                    <input type="checkbox" name="pages[]" value="52" checked="">Customers</label>
                </div>
            </div>
        </div>
    </div>
</div>

我想在页面加载后执行一个函数，它应该检查是否所有复选框都被选中，除了第一个具有 SelectAll_Dynamic 类的复选框

如果选中了所有子复选框，那么应该选中父复选框，我该如何实现……？

这是我选中/取消选中所有的功能

$('.SelectAll_Dynamic').click(function() {
                var select_Id = this.id;
                var checked = $(this).prop('checked');
                $('#tabs-'+select_Id).find('input:checkbox').prop('checked', checked);
            });
            $('.tab-pane').find('input:checkbox:not(:first)').click(function() {
                if (!$(this).is(':checked')) {
                    $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', false);
                    } else {
                    var checkbox_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first)').length;
                    var checked_check_box_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first):checked').length;
                    if (checkbox_length == checked_check_box_length) {
                        $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', true);
                    }
                }
            });

我的预期结果是:

<input type="checkbox" class="SelectAll_Dynamic" id="14" checked> //checked

如果选中所有子复选框。!

Answer 1

你需要像下面那样做:-

$(document).ready(function(){
  $('.tab-pane').each(function(){
    var checkbox_length = $(this).find('input:checkbox:not(:first)').length;
    var checked_check_box_length = $(this).find('input:checkbox:not(:first):checked').length;
    if (checkbox_length == checked_check_box_length) {
      $(this).find('input:checkbox:first').prop('checked', true);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-14" class="tab-pane  active">  
    <div class="panel-body">
        <div class="row">
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" class="SelectAll_Dynamic" id="14">
                        <b>Select All</b>
                    </label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                    <input type="checkbox" name="pages[]" value="41" checked="">Reservations</label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                    <input type="checkbox" name="pages[]" value="52" checked="">Customers</label>
                </div>
            </div>
        </div>
    </div>
</div>