how to check/un-check all the checkboxs using jquery

Question

I have this HTML code

<div class="friends_container">
   <div class="friend">
       <input type="checkbox" />    
      ...
   </div>
<div class="friend">
       <input type="checkbox" />    
      ...
   </div>
<div class="friend">
       <input type="checkbox" />    
      ...
   </div>
</div>

with select all/ unselect all link

<a id="selectall" href="#" >select all</a>

I tried to make it work, but I failed.. any help?

JsFiddle Here

There are _n_ questions about checking/unchecking checkboxes on SO. Isn't that enough? — Ram, Sep 05 '13 at 11:19

bipen · Answer 1 · 2013-09-05T11:25:41.713

2

with changing your link to checkbox, it will be easy

try this

<input id="selectall" type="checkbox"  />select all

js

 $('#selectall').click(function(){
    $('.friend').find('input:checkbox').prop('checked',this.checked);
})

fiddle here

with a link

$('#selectall').click(function(){
    $('.friend').find('input:checkbox').prop('checked',true);
})

create one more link to unselect the checkbox

edited Sep 05 '13 at 11:25

answered Sep 05 '13 at 11:20

bipen

36,319
9
49
62

score 1 · Answer 2 · answered Sep 05 '13 at 11:20

To check -

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

To uncheck -

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

Doing it using an anchor -

$("#selectall").click(function(){
   $("input[type='checkbox']").prop('checked', true);
});

And also if you have some anchor for deselecting -

<a id="deselectall" href="#" >deselect all</a>

you can add deselect all listener to it -

$("#deselectall").click(function(){
   $("input[type='checkbox']").prop('checked', false);
});

score 1 · Accepted Answer · answered Sep 05 '13 at 11:42

1

You can use jQuery .prop() method for this purpose.

$(function() {
    var $checkboxes = $('.friends_container>.friend>input:checkbox');
    $('#selectall').on('click', function(e) {
        e.preventDefault();
        $(this).toggleClass('selected');
        $checkboxes.prop('checked', function() {
            return !this.checked;
        });
    });
});

DEMO

answered Sep 05 '13 at 11:42

Eugene Naydenov

7,165
2
25
43

**click** is not a proper event for checkboxes, I think the **change** event is better – frogatto Sep 06 '13 at 12:48
@ABFORCE take a look to HTML in question or my demo. `#selectall` is a anchor element. The requirement was to check/uncheck checkboxes when user clicks on it. – Eugene Naydenov Sep 06 '13 at 14:17
well, but what happens when i execute `$('#selectall').attr('checked','checked');` ? by this the requirement will not meet – frogatto Sep 07 '13 at 11:22
You won't do this for `a#selectall` I think. – Eugene Naydenov Sep 08 '13 at 03:38

score 0 · Answer 4 · answered Sep 05 '13 at 11:20

//checkall
$('#selectall').on('click', function (e) {
    $('input[type="checkbox"]').prop('checked', true);
    e.preventDefault();
});
//uncheck all
$('#unselectall').on('click', function (e) {
    $('input[type="checkbox"]').prop('checked', false);
    e.preventDefault();
});

score 0 · Answer 5 · answered Sep 05 '13 at 11:20

0

$('#selectall').click(function(e){
  e.preventDefault();
  $('input[type="checkbox"]').prop('checked',this.checked);
});

answered Sep 05 '13 at 11:20

Dipesh Parmar

27,090
8
61
90

Somnath Kharat · Answer 6 · 2013-09-05T11:30:18.727

0

jquery version 1.6 + use prop

$("#input[type='checked']").prop('checked',true);

jquery version 1.6 - use attr

$("#input[type='checked']").attr('checked','checked');

or

$("#input[type='checked']").attr('checked',true);

edited Sep 05 '13 at 11:30

answered Sep 05 '13 at 11:22

Somnath Kharat

3,570
2
27
51

1

`true` is not a valid value for checked property – frogatto Sep 05 '13 at 11:24
1

That said, when using `prop` to set checked/selected you should use a boolean instead of a string. – h2ooooooo Sep 05 '13 at 11:24
@ABFORCE modified ans.... – Somnath Kharat Sep 05 '13 at 11:30

how to check/un-check all the checkboxs using jquery

6 Answers6