CODEWITHSUNDEEP
javascriptjqueryhtmlcheckboxjquery-selectors
Jorge
Jorge

Reputation: 75

How to check parent checkbox if all children checkboxes are checked

I want to make a separate function from my checkall and uncheckall button (I already have one working). This time I want my checkall/uncheckall chekcbox checked if all children checkboxes are checked.

I was thinking maybe I can compare my checked children checkbox length from children checkbox length.

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

Can someone give me some ideas on this? Still my checkall/uncheckall checkbox doesn't changed to checked. Conditions made was true in if statement. Or maybe my idea of comparing length is not gonna work?

.cb my class for children checkbox #checkall my id for parent or checkall/uncheckall checkbox

Upvotes: 4

Views: 5372

Answers (2)

Gauri Bhosle
Gauri Bhosle

Reputation: 5483

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>

Upvotes: 0

kukkuz
kukkuz

Reputation: 42380

It is already working I guess - issue is putting the event listener inside a function (don't know why is that the case).

Anyway, see demo below:

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

Upvotes: 3

Related Questions