Check and uncheck inputs work only one time with Jquery

Question

I am trying to check/uncheck all checkboxes by click on one checkbox in head of table. First click add attribute to inputs, second uncheck. It works only one time. Testing on Firefox and Chrome. Аttributes keep changing, but this is not shown in page. I see it only in browser debugger.

<table>
    <thead>
        <tr>
            <th><input type="checkbox" /></th>
            <th>#</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>1</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>2</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>3</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
$(function () {
    $('th input[type="checkbox"]').click(function(){
        if ( $(this).is(':checked') )
            $('td input[type="checkbox"]').attr('checked', 'checked');
        else
            // $('td input[type="checkbox"]').attr('checked', false);
            $('td input[type="checkbox"]').removeAttr('checked');
    })
});
</script>

Sample http://jsfiddle.net/aJhm9/

Answer 1

Use properties instead of attributes

$(function () {
    $('th input[type="checkbox"]').click(function(){
        if ( $(this).is(':checked') )
            $('td input[type="checkbox"]').prop('checked', true);
        else
            $('td input[type="checkbox"]').prop('checked', false);
    })
});

http://jsfiddle.net/aJhm9/2/

Answer 2

.attr() is for modifying an elements default state only, not its live state Use .prop() for changing the live state of an element.