Question

让我试着从图像中解释，

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

现在从租车标签中，两者都是从php代码中选择的，即（预订，客户），
所以现在我想在 document.ready 中编写一个代码来检查SelectAll_Dynamic（全选复选框），！因为所有内部复选框（预订，客户）都已选中，
如果未选中内部复选框（预订或客户）中的任何人，则应取消选中SelectAll_Dynamic（全选复选框）。

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 类

如果选中所有子复选框，那么应该选择父级，我该如何实现？

这是我检查/取消选中所有

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

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

Answer 1

你需要像下面这样做： -

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

在$(document).ready函数中添加以下代码，如果选中了所有其他复选框，则检查选中全部复选框。

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果在该div

3 个答案: