如果在该 div 中选中了所有子复选框，则选中/取消选中（全选复选框）

Posted 2023-05-08

【中文标题】如果在该 div 中选中了所有子复选框，则选中/取消选中（全选复选框）

【英文标题】：Check/Uncheck (Select All checkbox) if all child check-boxes are selected in that div

【发布时间】：2018-04-13 18:42:34

【问题描述】：

让我试着从图片上解释一下，

1.Reservations，客户在租赁车辆选项卡下检查。

现在从租赁车辆选项卡中，两者都从 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

如果所有子复选框都被选中。！

【问题讨论】：

@AbdulWaheed 这里没有 php，所以为什么要这样标记？

“我说的是页面加载，如果从 php 代码中选择了所有子复选框，那么应该选择父复选框” - 这里没有相关代码。要包含已经设置的值，需要做的是预取这些值并将其存储在会话/cookie 中。这个问题不清楚，恕我直言。 @AbdulWaheed 您的输入没有任何价值。

好的，这篇文章开始显得过于宽泛和不清楚，并且需要有关如何执行此操作的代码。您能否至少通过更新并诚实地对您的帖子进行详细说明？ @AbdulWaheed

@Fred-ii- 我已编辑问题尝试阅读 4 分一次。！

@AlivetoDie 不是来自我想要实现的 javascript 的 php

【参考方案1】：

你需要这样做：-

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

【讨论】：

@AbdulWaheed 它将相应地适用于每个选项卡，而不会出现任何问题。很高兴帮助你:):)

【参考方案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>

在 $(document).ready 函数中添加以下代码，检查是否选中了所有其他复选框，然后选中 Select all 复选框。

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

【讨论】：

我在这里添加了sn-p

我这里没有使用任何动态值。我错过了什么？？

是否有多个带有$('.SelectAll_Dynamic')的复选框？

【参考方案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>