jquerycheckbox

Jquery select all checkboxes in table


I have a script that should check all the checkboxes in a table. It checks them all the first time, it unchecks them after that. However, when I try to recheck them nothing happens.

the jquery:

$('#selectAll').click(function(e){
    var table= $(e.target).closest('table');
    $('td input:checkbox',table).attr('checked',e.target.checked);
});

the HTML:

<table>
    <tr>
        <th>
            <input type="checkbox" id="selectAll" />
        </th>
        <th>
            hi!
        </th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="1"/>
        </td>
        <td>
            hi!
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="2"/>
        </td>
        <td>
            hi!
        </td>
    </tr>
</table>

here's a fiddle of the behavior:

http://jsfiddle.net/EEJrU/

Why is it not working after being clicked once?


Solution

  • You need to use .prop() instead of .attr()

    $('#selectAll').click(function(e){
        var table= $(e.target).closest('table');
        $('td input:checkbox',table).prop('checked',this.checked);
    });
    

    Demo: Fiddle

    Attributes vs. Properties