如果在该div中选择了所有子复选框，则选中/取消选中（全选复选框） [英] Check/Uncheck (Select All checkbox) if all child check-boxes are selected in that div

问题描述

让我尝试从图片中解释，

let me try to explain from image,

1.预订，客户在租赁车辆的标签下进行检查。

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

1. 现在来自租赁vehicle选项卡，都是从php代码中选择的，即（预订，客户），

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

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

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,

如果未选中内部复选框（预订或客户）中的任何人，则选择AllAll_Dynamic（全选复选框）应该取消选中。

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

14是动态的。对于每个新的div，它会被改变的例子：1,4,6,12唯一..

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

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);
                    }
                }
            });

我的预期结果是：

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

如果所有子复选框都被剔除。

if all child checkboxes are cheked.!

推荐答案

你需要这样做： -

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中选择了所有子复选框，则选中/取消选中（全选复选框）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！