I am trying a check a checkbox (which checks all other checkboxes in the list and unchecks even if one among the list is unchecked. Now only the first I mean one checkbox checking all the remaining checkboxes in the list is happening but the vice versa I mean unchecking even if one among the list in unchecked is not working. How can i achieve that?

<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>

<div id="checkboxlist">
<label><input type="checkbox" name="sample"/>checkbox1</label><br/>
<label><input type="checkbox" name="sample"/>checkbox2</label><br />
<label><input type="checkbox" name="sample"/>checkbox3</label><br />
<label><input type="checkbox" name="sample"/>checkbox4</label><br />

 </div> 

Fiddle.

I am trying a check a checkbox (which checks all other checkboxes in the list and unchecks even if one among the list is unchecked. Now only the first I mean one checkbox checking all the remaining checkboxes in the list is happening but the vice versa I mean unchecking even if one among the list in unchecked is not working. How can i achieve that?

<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>

<div id="checkboxlist">
<label><input type="checkbox" name="sample"/>checkbox1</label><br/>
<label><input type="checkbox" name="sample"/>checkbox2</label><br />
<label><input type="checkbox" name="sample"/>checkbox3</label><br />
<label><input type="checkbox" name="sample"/>checkbox4</label><br />

 </div> 

Fiddle.

• javascript
• jquery
• html
• checkbox

• Your fiddle works fine as expected. what is the issue ? – Thanga Commented Jan 14, 2016 at 8:30
• if i uncheck any one among the list the select all checkbox must be unchecked that is not happening – user3398900 Commented Jan 14, 2016 at 8:31
• 2 Please read minimal reproducible example. You need to include all the relevant code in the question. A JSFiddle is great, but put it in the question as well. – Anders Commented Jan 14, 2016 at 8:34
• Hi @Azim its working good but the select all checkbtn is not under checkstate even after checking all the checkboxes :| – user3398900 Commented Jan 14, 2016 at 8:41

4 Answers 4

I would do it this way:

$('.selectall').on('change', function(e) {
    var $inputs = $('#checkboxlist input[type=checkbox]');
    if(e.originalEvent === undefined) {
        var allChecked = true;
        $inputs.each(function(){
            allChecked = allChecked && this.checked;
        });
        this.checked = allChecked;
    } else {
        $inputs.prop('checked', this.checked);
    }
});

$('#checkboxlist input[type=checkbox]').on('change', function(){
    $('.selectall').trigger('change');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>

<div id="checkboxlist">
    <label><input type="checkbox" name="sample"/>checkbox1</label><br/>
    <label><input type="checkbox" name="sample"/>checkbox2</label><br />
    <label><input type="checkbox" name="sample"/>checkbox3</label><br />
    <label><input type="checkbox" name="sample"/>checkbox4</label><br />
    
</div>

EDIT: swapped e.isTrigger for e.originalEvent === undefined per A. Wolff's suggestion as mented below.

You can do it like below. Add another click event for checkbox under #checkboxlist, if a checkbox is unchecked then uncheck .selectall.

$('#checkboxlist input[type=checkbox]').click(function(){
   if (!$(this).is(':checked')) {
       $('.selectall').prop('checked', false);
   }
});

DEMO

Check out this Demo.. with validation

<input type="checkbox" id="anchor-from"/>main

<input type="checkbox" class="checkall" id="period-daily" disabled />CheckBox2
<input type="checkbox" class="checkall" id="period-weekly"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly2"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly3"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly4"disabled />CheckBox3

Js

$("#anchor-from").change(function(){
                        if($('#anchor-from').is(':checked'))
                        {
                          $(".checkall").attr("disabled", false); 
                          $(".checkall").prop("checked", true); 

                        }
                        else
                        {
                        $(".checkall").attr("disabled", true);
                         $(".checkall").prop("checked", false); 
                        }



                    });

                    $(".checkall").change(function(){
                    if($('.checkall').not(':checked'))
                    {
                          $(".checkall").attr("disabled", true); 
                          $(".checkall").prop("checked", false); 
                          $("#anchor-from").prop("checked", false); 
                    }
                 });

 $(document).ready(function () {
       $('input[name=sample]').click(function() {

           if ($(this).hasClass('selectall')) {
               if ($(this).prop('checked') == true) {
                   $('#checkboxlist input[name=sample]').prop('checked', true);
               }
               else {
                   $('#checkboxlist input[name=sample]').prop('checked', false);
               }

           }
           else {
               if ($('#checkboxlist input[name=sample]:checked').length == $('#checkboxlist input[name=sample]').length) {
                   $('.selectall').prop('checked', true)
               }
               else {
                   $('.selectall').prop('checked', false)
               }
           }

       });

   });