当取消选择任何一个孩子时，如何取消选中全选复选框

Question

How can I uncheck the select all checkbox(parent) , when any one of their child checkboxes are deselected!

From the snippet when we select all checkbox and when we deselect users from their then select all checkbox should be unchecked (Because all checkboxes are not selected)

 $(document).ready(function() { $('#Admin').click(function() { var checked = $(this).prop('checked'); $('#tab-10').find('input:checkbox').prop('checked', checked); }); $('#Sales').click(function() { var checked = $(this).prop('checked'); $('#tab-20').find('input:checkbox').prop('checked', checked); }); // i have so may like this in that case how can i do that.? }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#tab-10"> First </a></li> <li class=""><a data-toggle="tab" href="#tab-20"> Second </a></li> </ul> <div class="tab-content vehicle"> <div id="tab-10" class="tab-pane active"> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <div class="checkbox"> <label><input type="checkbox" id="Admin"><b>Select All</b></label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label><input type="checkbox" name="pages[]" value="2">Dealerships</label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label><input type="checkbox" name="pages[]" value="23">Users</label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label><input type="checkbox" name="pages[]" value="59">Third-Party Exports</label> </div> </div> </div> </div> </div> <br><br> <div id="tab-20" class="tab-pane "> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <div class="checkbox"> <label><input type="checkbox" id="Sales"/><b>Select All</b></label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label><input type="checkbox" name="Second[]" value="2">Second tab 1</label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label><input type="checkbox" name="Second[]" value="23">Second tab 1</label> </div> </div> </div> </div> </div> </div> 

Answer 1

Actually you din't did any coding regarding your issue (that is when you uncheck any check-box rather than select-all, make select-all unchecked).

Do like below:-

 $(document).ready(function() { $('#Admin').click(function() { var checked = $(this).prop('checked'); $('#tab-10').find('input:checkbox').prop('checked', checked); }); $('#Sales').click(function() { var checked = $(this).prop('checked'); $('#tab-20').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> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#tab-10"> First </a></li> <li class=""><a data-toggle="tab" href="#tab-20"> Second </a></li> </ul> <div class="tab-content vehicle"> <div id="tab-10" class="tab-pane active"> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" id="Admin"><b>Select All</b></label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="pages[]" value="2">Dealerships</label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="pages[]" value="23">Users</label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="pages[]" value="59">Third-Party Exports</label> </div> </div> </div> </div> </div> <br> <br> <div id="tab-20" class="tab-pane "> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" id="Sales" /><b>Select All</b></label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="Second[]" value="2">Second tab 1</label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" name="Second[]" value="23">Second tab 1</label> </div> </div> </div> </div> </div> </div> 

Working fiddle:- http://jsfiddle.net/am6rgdw1/

Answer 2

Add the below code to your js:

$('input[name="pages[]"]').click(function(){
  $('input[name="pages[]"]').each(function() { 
    var checked = $(this).attr('checked');
    if(!checked){
      $('#Admin').attr('checked', false);
      return false;
    }
  });
});

Answer 3

For Dynamic tab id's i did like this:

This is my html and php:

<div class="tab-content vehicle">
<?php  $active='active'; foreach ( $check_menu as $y) {?>
<div id="tabs-<?=$y?>" 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="<?=$y?>" />
                <b>Select All</b>
            </label>
        </div>
    </div>
    <?php  foreach($menus as $x): if ($x['parent_id'] ==$y):?>
    <div class="col-md-3">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="pages[]" value="<?=$x['id']?>"
                <?php   if (array_search($x['id'],$my_menu,true))
                    {
                        echo "checked ";
                    }
                ?>
            ><?=$x['name']?></label>
        </div>
    </div>
    <?php  endif; $active="";
    endforeach;?>
</div></div>
</div>
<?php } ?>
</div>

This is my script:

<script>
    $(document).ready(function() {
        $('.SelectAll_Dynamic').click(function() {
            var select_Id = this.id;
            var checked = $(this).prop('checked');
            $('#tabs-'+select_Id).find('input:checkbox').prop('checked', checked);
            alert(select_Id);
        });

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