我有一个HTML结构，其中我有多个具有相同输入类和容器的部分。

<div class="card-columns">
<div class="card" id="role-card-single" data-total-items="6">
   <div class="card-body">
      <h5 class="card-title">Staff Users </h5>
          <div id="selectall">
              <input type="checkbox" class="checkall" value="1">
                  <label>Select all</label>
           </div>

           <div class="custom-control custom-checkbox">
               <input type="checkbox" name="abc"  class="single-role-input custom-control-input " value="">
                   <label class="custom-control-label" for="30">  Add </label>
           </div>

           <div class="custom-control custom-checkbox">
               <input type="checkbox" name="def"  class="single-role-input custom-control-input " value="">
                   <label class="custom-control-label" for="30">  Edit </label>
            </div>
    </div>
</div>

<div class="card" id="role-card-single" data-total-items="6">
   <div class="card-body">
       <h5 class="card-title">Staff Users </h5>
          <div id="selectall">
              <input type="checkbox" class="checkall" value="1">
                  <label>Select all</label>
           </div>

           <div class="custom-control custom-checkbox">
               <input type="checkbox" name="abc"  class="single-role-input custom-control-input " value="">
                   <label class="custom-control-label" for="30">  Add </label>
           </div>

           <div class="custom-control custom-checkbox">
               <input type="checkbox" name="def"  class="single-role-input custom-control-input " value="">
                   <label class="custom-control-label" for="30">  Edit </label>
            </div>
   </div>
</div>

现在我试图实现的是，当我选中“全选”，它将选择所有以下复选框。
同样，当我选中每个复选框并选中单个容器中的所有复选框时，它也会使该容器的“全选”复选框。
第一件事我已经通过下面的代码实现。

$(document).on('change', '.checkall', function() {
    var applyallchecks = $(this).parents('#role-card-single').find('.single-role-input');
    if (this.checked) {
        applyallchecks.prop('checked',true);
    } else {
        applyallchecks.prop('checked', false);
    }
});

型
第二部分，当所有复选框都被选中时，检查每个输入时，我正在尝试这种方式，但它不起作用，

$(document).on('change', '.single-role-input' , function(e) {
    if($(this).is(':checked')) {
        $parent = $(this).parents('#role-card-single').find('.checkall');
        var applyallchecks = $(this).parents('#role-card-single').find('.custom-checkbox');
        if (applyallchecks.children('.single-role-input') + ":checked".length === applyallchecks.children('.single-role-input').length) {

            $parent.prop('checked', true);
        } else {
            $parent.prop('checked', false);
        }
    }
});

型
你能检查我的代码中有什么问题吗？为什么当容器中的所有单个复选框都被标记为选中时，它却标记为“全选”选中。
谢谢你，谢谢