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

Question

如果取消选中其中任何一个子复选框，如何取消选中全选checkbox(parent) ！

从我们选择所有复选框的代码段中，当我们取消选择用户时，则应取消选中所有复选框（因为未选中所有复选框）

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

实际上你没有对你的问题进行任何编码（即当你取消选中任何复选框而不是select-all时，选择all-all取消选中）。

如下所示： -

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

工作小提琴： - http://jsfiddle.net/am6rgdw1/

Answer 2

将以下代码添加到您的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

对于动态标签ID，我喜欢这样：

这是我的HTML和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>

这是我的脚本：

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