Question

我想从我的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复选框没有更改为选中状态。如果声明，条件是真实的。或许我比较长度的想法不会起作用？

.cb我的班级儿童复选框 #checkall我的父ID或checkall / uncheckall复选框

Answer 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" />

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

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

2 个答案: