check/uncheck all the checkbox in a table

Question

I have a table that has checkbox column and I added this :

<th>
    <input type="checkbox" id="selectAll">
</th>

and here's my jQuery function :

jQuery(document).ready(function() {
   jQuery('#selectAll').click(function(){ 
   jQuery("input[type='checkbox']").attr('checked', jQuery('#selectAll').is(':checked')); }) 
});

It works fine at the first check but when i uncheck and try to check again it doesn't work! Any reason why it doesn't work? Thanks

instead of `click` event use `change` event and use `prop` instead of `attr` — Praveen, May 05 '14 at 09:57

score 2 · Accepted Answer · answered May 05 '14 at 09:58

2

Try to use .prop() and this.checked:

jQuery(document).ready(function() {
   jQuery('#selectAll').click(function(){ 
       jQuery("input[type='checkbox']").prop('checked', this.checked); 
    }) 
});

answered May 05 '14 at 09:58

Felix

37,892
8
43
55

Works great ! Could you please tell me why my code didn't work? – user3350731 May 05 '14 at 10:00
1

@user3350731 You can read from the [.attr()](http://api.jquery.com/attr/) docs: `As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.` – Felix May 05 '14 at 10:02

score 1 · Answer 2 · answered May 05 '14 at 09:58

When you choose by id on jquery it choose the first element by default, so your jQuery('#selectAll').is(':checked') will return the result of the first element, try using a class for selectAll instead :

<th>
    <input type="checkbox" class="selectAll">
</th>



jQuery(document).ready(function() {
   jQuery('.selectAll').click(function(){ 
   jQuery("input[type='checkbox']").attr('checked', jQuery('.selectAll').is(':checked')); }) 
});

score 1 · Answer 3 · answered May 05 '14 at 09:59

1

this should work:

$('input#selectAll').change(function(){

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

});

Fiddle DEMO

answered May 05 '14 at 09:59

Ehsan Sajjad

61,834
16
105
160

Nidhish Krishnan · Answer 4 · 2014-05-05T10:04:57.137

Take a look at this

Working Demo

Html

<p><input type="checkbox" id="selectAll" /> Check/Uncheck All</p>
<hr/>
<p>
<input type="checkbox" class="chk" /> Checkbox  1
<input type="checkbox" class="chk" /> Checkbox  2
<input type="checkbox" class="chk" /> Checkbox  3
</p>

Script

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

Ishan Jain · Answer 5 · 2014-05-05T10:09:04.193

Try to use prop() instead of using of using .attr().

jQuery(document).ready(function() {
   jQuery('#selectAll').click(function(){ 
   jQuery("input[type='checkbox']").prop('checked', jQuery('#selectAll').is(':checked')); }) 
});

Working Example

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

check/uncheck all the checkbox in a table

5 Answers5