Check all checkboxes when select all is checked

Question

I want to check all checkboxes when 'Select all' checkbox is checked. I've read various threads on SO, but not able to get the expected o/p.

Related Question:- Select all checkboxes with jQuery

Here's what I tried.

<div class="row-fluid" id="set_alarm">
    <label class="checkbox inline"><input type="checkbox" id="select_all"><b>Select All</b></label><br>
    <label class="checkbox inline days"><input type="checkbox" id="Mon"><b>Mon</b></label>
    <label class="checkbox inline days"><input type="checkbox" id="Tue"><b>Tue</b></label>
    ......
    ......
</div>

jQuery

$('#select_all').change(function() {
    var checkboxes = $(this).closest('.days').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});

possible duplicate of [Jquery "select all" checkbox](http://stackoverflow.com/questions/15879608/jquery-select-all-checkbox) — Dom, May 26 '14 at 05:56
Check out my answer, it does what you want and deselects the "check all" box when you select a different box. — Ian, May 26 '14 at 06:03

Ehsan Sajjad · Answer 1 · 2014-05-26T06:02:31.963

3

add a class on child checkboxes and do like this in one line:

HTML:

<div class="row-fluid" id="set_alarm">
    <label class="checkbox inline"><input type="checkbox" id="select_all"><b>Select All</b></label><br>
    <label class="checkbox inline days"><input type="checkbox" class="days" id="Mon"><b>Mon</b></label>
    <label class="checkbox inline days"><input type="checkbox"  class="days" id="Tue"><b>Tue</b></label>

</div>

JQUERY:

$('#select_all').change(function() {


        $('.days').prop("checked", this.checked);

});

$('.days').change(function(){

if($('input:checkbox:checked.days').length === $("input:checkbox.days").length)
{
    $('#select_all').prop("checked",true);
}
else
{
    $('#select_all').prop("checked",false);
}

})

FIDDLE DEMO

edited May 26 '14 at 06:02

answered May 26 '14 at 05:50

Ehsan Sajjad

61,834
16
105
160

Works good but , if I uncheck any one day, then 'select all' option should get unchecked as well. – Praful Bagai May 26 '14 at 05:55
you have to add little more in it then – Ehsan Sajjad May 26 '14 at 05:57
I wrote this `$('.days').change(function() { if (!($(".days").is(':checked'))){ $("#select_all").removeAttr('checked'); }` – Praful Bagai May 26 '14 at 05:58
`$('.days').change(function() { $('#select_all').attr("checked", this.checked); })`; Use this to uncheck select all. – Shaunak D May 26 '14 at 06:04
As per your code, select all should get checked when all the days are checked. But it didnt worked as expected. – Praful Bagai May 26 '14 at 06:07

Shaunak D · Answer 2 · 2014-05-26T06:03:29.277

You can also use this, if you don't want to modify your markup. DEMO Fiddle

$('#select_all').change(function() {
    $('.days input[type="checkbox"]').attr("checked", this.checked);
});

$('.days input[type="checkbox"]').prop("checked", this.checked);

OR

$('.days input[type="checkbox"]').attr("checked", this.checked);

Following is the code to unselect Select All if you uncheck on of the days.

$('.days input[type="checkbox"]').change(function() {
        $('#select_all').attr("checked", this.checked);

});

Ian · Accepted Answer · 2014-05-26T06:01:28.387

You need to generalize your code more, there is a bunch of stuff in that other issue that isn't needed if you're just trying to select all checkboxes.

    $('#select_all').change(function() {
        if($(this).is(':checked')) {
            $("input[type='checkbox']").attr('checked', 'checked');
        } else {
            $("input[type='checkbox']").removeAttr('checked');
        }
    });
        $("input[type='checkbox']").not('#select_all').change( function() {
        $('#select_all').removeAttr('checked');
    });

DEMO

score 0 · Answer 4 · answered May 26 '14 at 05:48

closest is for parent tree not next or previous siblings you can use nextAll:

var checkboxes = $(this).parent().nextAll('.days').find(':checkbox');

$('#select_all').change(function() {
    var checkboxes = $(this).parent().nextAll('.days').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.prop('checked', true);
    } else {
        checkboxes.removeProp('checked');
    }
});

score 0 · Answer 5 · answered May 26 '14 at 05:51

0

Here is the simple example

$('#select_all').click(function() {
  var c = this.checked;
  $(':checkbox').prop('checked',c);
});

OR

$('#select_all').click(function() {
  $(':checkbox').prop('checked', this.checked);
});

That's all

answered May 26 '14 at 05:51

Ram Singh

6,664
35
100
166

score 0 · Answer 6 · answered May 26 '14 at 06:06

Try below to select all checkboxes when select_all checked

$('#select_all').change(function() {
   $('.days').prop("checked", $(this).is(':checked'));
});

and unselect select_all when one of the days checkbox unchecked.

$('.days').change(function() {
     if($(this).is(':checked')) 
     {     
       // check if all days checkbox checked then check select_all
       if($('.days').is(':checked').length == $('.days').length)
         $('#select_all').prop("checked", true); 
     }
     else
     {
        $('#select_all').prop("checked", false); 
     } 
 });

Check all checkboxes when select all is checked

6 Answers6

HTML:

JQUERY: