Parent Checkbox will automatically checked if I checked all sibling checkbox-CodePudding

Please see code below:

$(document).ready(function(){
        $('input[type=checkbox][class=chk-all-s]').click(function() {
            var cb = $(this),
                name = cb.attr('check-all-for');
            
            if(name == null)
                return false;

            $('input[type=checkbox][name^=' name ']')
                .prop('checked', cb.prop('checked'))
                .click(function() {
                    if(!$(this).prop('checked'))
                        cb.prop('checked', false);
                });
        });  

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chk-all-con">
    <input type="checkbox" id="chkall1" class="chk-all-s" check-all-for="approve" />
    <label class="lbl-chkall" for="chkall1">Parent Checkbox 1</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall2" type="checkbox" name="approve" class="chkAll">
  <label class="lbl-chkall" for="chkall2">Sibling Checkbox</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall3" type="checkbox" name="approve" class="chkAll">
  <label class="lbl-chkall" for="chkall3">Sibling Checkbox</label>
</div>

<br>
<br>

<div class="chk-all-con">
    <input type="checkbox" id="chkall4" class="chk-all-s" check-all-for="disapprove" />
    <label class="lbl-chkall" for="chkall4">Parent Checkbox 2</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall5" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall5">Sibling Checkbox</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall6" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall6">Sibling Checkbox</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall7" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall7">Sibling Checkbox</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall8" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall8">Sibling Checkbox</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall9" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall9">Sibling Checkbox</label>
</div>

Hi guys, my code is working just fine. When I checked the parent checkbox all the sibling's checkboxes is checked. However, when I tried checking all the siblings the parent checkbox is not checked. The parent checkbox should be check if I checked all the sibling's checkboxes. Can anyone help me how to do it? Thanks

CodePudding user response：

You'll have to add a new event lister for all the siblings and toggle the parent automatically as follows:

$(document).ready(function(){
        $('input[type=checkbox][class=chk-all-s]').click(function() {
            var cb = $(this),
                name = cb.attr('check-all-for');
            
            if(name == null)
                return false;

            $('input[type=checkbox][name^=' name ']')
                .prop('checked', cb.prop('checked'))
                .click(function() {
                    if(!$(this).prop('checked'))
                        cb.prop('checked', false);
                });
        });
        $('input[type=checkbox][class!=chk-all-s]').click(function() {
            var cb = $(this),
                name = cb.attr('name');
            
            if(name == null)
                return false;
            var allChildrenChecked = true;
            $('input[type=checkbox][name^=' name ']').each(function() {
               if (!$(this).prop('checked')) {
                allChildrenChecked = false;
                return;
               }
            });
            $('input[type=checkbox][check-all-for^=' name ']').prop('checked', allChildrenChecked);
        });  

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chk-all-con">
    <input type="checkbox" id="chkall1" class="chk-all-s" check-all-for="approve" />
    <label class="lbl-chkall" for="chkall1">Parent Checkbox 1</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall2" type="checkbox" name="approve" class="chkAll">
  <label class="lbl-chkall" for="chkall2">Sibling Checkbox</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall3" type="checkbox" name="approve" class="chkAll">
  <label class="lbl-chkall" for="chkall3">Sibling Checkbox</label>
</div>

<br>
<br>

<div class="chk-all-con">
    <input type="checkbox" id="chkall4" class="chk-all-s" check-all-for="disapprove" />
    <label class="lbl-chkall" for="chkall4">Parent Checkbox 2</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall5" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall5">Sibling Checkbox</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall6" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall6">Sibling Checkbox</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall7" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall7">Sibling Checkbox</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall8" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall8">Sibling Checkbox</label>
</div>

<div class="chk-all-con chk-all-without-text">
  <input id="chkall9" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall9">Sibling Checkbox</label>
</div>