Check/Uncheck (Select All checkbox) if all child check-boxes are selected in that div

Question

let me try to explain from image,

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

2. Now From Rental vehicles tab, both are selected from php code ie(Reservations, Customers),

3. 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,

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

Answer 2

 $(document).ready(function() { var allCheckboxes = $('.SelectAll_Dynamic').closest('div[id^="tabs-"]').find('input:checkbox').not(":eq(0)"); var flag = true; $.each(allCheckboxes, function( i, val ) { if($(val).prop('checked') == false) flag = false; }); if(flag) $('.SelectAll_Dynamic').prop('checked', true); $('.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); } } }); }); 

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

Add the below code in your $(document).ready function whick checks if all other checkboxes are checked then check the Select all checkbox.

var allCheckboxes = $('.SelectAll_Dynamic').closest('div[id^="tabs-"]').find('input:checkbox').not(":eq(0)");
var flag = true;
$.each(allCheckboxes, function( i, val ) {
  if($(val).prop('checked') == false)
        flag = false;
});

if(flag)
  $('.SelectAll_Dynamic').prop('checked', true);

Answer 3

 function SelectAll_Dynamic(){ if($('.SelectAll_Dynamic').is(':checked')){ //alert('if'); $( "input" ).prop( "checked", true ); } else { //alert('else'); $( "input" ).prop( "checked", false ); } } 

 <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" onclick="SelectAll_Dynamic();" id="14" checked> <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>