如果在该div中选择了所有子复选框，则选中/取消选中（全选复选框）

Question

let me try to explain from image,

1.Reservations, Customers are checked under the tab of Rental vehicles.

1. Now From Rental vehicles tab, both are selected from php code i.e(Reservations, Customers),

2. So now I want to write a code in document.ready to get checked the SelectAll_Dynamic (Select All checkbox),! because all inner checkboxes (Reservations, Customers) are checked,

3. if anyone from inner checkboxes(either Reservations or Customers) not checked then SelectAll_Dynamic (Select All checkbox) should be unchecked.

14 is dynamic.! for every new div its gets changed example: 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>

I want to execute a function after page load, which should check whether all checkboxes are checked or not, apart from the first one which has SelectAll_Dynamic class

If all child checkboxes selected then the parent should get selected how can I achieve that..?

This is the functionality which I have for check/uncheck all

$('.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);
                    }
                }
            });

My expected results are:

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

if all child checkboxes are cheked.!

Answer 1

You need to do it like below:-

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

</div>