如果选中所有子复选框，如何检查父复选框

Posted 2023-03-05

【中文标题】如果选中所有子复选框，如何检查父复选框

【英文标题】：How to check parent checkbox if all children checkboxes are checked

【发布时间】：2017-05-26 15:09:32

【问题描述】：

我想从我的 checkall 和 uncheckall 按钮中创建一个单独的功能（我已经有一个工作）。 这次我希望我的 checkall/uncheckall chekcbox 检查是否所有子复选框都被选中。

我在想也许我可以将我选中的子复选框长度与子复选框长度进行比较。

function testFunction() 
    $('.cb').change(function()
        var checkedChildCheckBox = $('.cb:checked').length;
        var numberOfChildCheckBoxes = $('.cb').length;
        if (checkedChildCheckBox == numberOfChildCheckBoxes)
           $("#checkAll").prop('checked', true);
        
   )

有人可以给我一些想法吗？仍然我的 checkall/uncheckall 复选框没有更改为选中。 if 语句中的条件为真。 或者也许我比较长度的想法行不通？

.cb我的儿童课复选框 #checkall我的父母ID或选中/取消选中复选框

【参考方案1】：

我猜它已经在工作了 - 问题是将事件侦听器放在一个函数中（不知道为什么会这样）。

无论如何，请看下面的演示：

var numberOfChildCheckBoxes = $('.cb').length;

$('.cb').change(function() 
  var checkedChildCheckBox = $('.cb:checked').length;
  if (checkedChildCheckBox == numberOfChildCheckBoxes)
    $("#checkAll").prop('checked', true);
  else
    $("#checkAll").prop('checked', false);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkAll">All</label>
<input type="checkbox" id="checkAll" />
<br/>
<br/>
<input class="cb" type="checkbox" />
<input class="cb" type="checkbox" />
<input class="cb" type="checkbox" />

【讨论】：

我将它放在$(document).ready 中，但它不起作用。嗯

【参考方案2】：

Try below code




 Js
    <script type="text/javascript">
    $(document).ready(function()
        $('#select_all').on('click',function()
            if(this.checked)
                $('.checkbox').each(function()
                    this.checked = true;
                );
            else
                 $('.checkbox').each(function()
                    this.checked = false;
                );
            
        );

        $('.checkbox').on('click',function()
            if($('.checkbox:checked').length == $('.checkbox').length)
                $('#select_all').prop('checked',true);
            else
                $('#select_all').prop('checked',false);
            
        );
    );
    </script>

html
<ul class="main">
    <li><input type="checkbox" id="select_all" /> Select all</li>
    <ul>
        <li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
        <li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
        <li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
        <li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
        <li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
    </ul>
</ul>