CODEWITHSUNDEEP
jquerycheckbox
Praful Bagai
Praful Bagai

Reputation: 17382

Check all checkboxes when select all is checked

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');
    }
});

Upvotes: 2

Views: 4620

Answers (6)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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); 
     } 
 });

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20636

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);

});

Upvotes: 1

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

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

Upvotes: 3

Ian
Ian

Reputation: 653

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

Upvotes: 1

Ram Singh
Ram Singh

Reputation: 6918

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

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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');
    }
});

Upvotes: 0

Related Questions