How to check and uncheck checkbox elements using jquery?

Question

I'm using the .attr() jQuery function to check and uncheck checkboxes. It work the first time but then it doesn't any more.

After read several questions about it I just can-t make this work. e.g. this and this and this

I tested it on Chrome and Firefox. I get the same problems using jsFiddle.

Where is the problem? On the JavaScript code, in HTML or where?

This is all the code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Searchs</title>
</head>
<body>
    <div id="results-body">
        <table>
            <thead>
                <tr>
                    <td class="small center">
                        <input type="checkbox" id="checkall" onclick="master();" />
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="center">
                        <input type="checkbox" class="slave" onclick="slave();" />
                    </td>
                </tr><tr>
                    <td class="center">
                        <input type="checkbox" class="slave" onclick="slave();" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- LOAD THE JS AT THE END OF THE FILE -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function(){
            master = function() {
                if ($( '#checkall:checkbox' ).is(":checked"))
                    $('input:checkbox').attr('checked',true);
                else
                    $('input:checkbox').attr('checked',false);
            }
            slave = function() {
                var allSelected = true;
                $( '.slave[type="checkbox"]' ).each(function() {
                    if ($( this ).is(":not(:checked)")){
                        allSelected = false;
                        //return;
                    }
                });
                if (!allSelected) {
                    //$( '#checkall:checkbox' ).removeAttr('checked');
                    alert("REMOVE: \nFrom " + $( '#checkall:checkbox' ).attr('checked') );
                    $( '#checkall:checkbox' ).attr('checked',false);
                    alert("to " + $( '#checkall:checkbox' ).attr('checked') );

                } else {
                    alert("ADD: \nFrom " + $( '#checkall:checkbox' ).attr('checked') );
                    $( '#checkall:checkbox' ).attr('checked',true);
                    alert("to " + $( '#checkall:checkbox' ).attr('checked') );
                }
            }
        });
    </script>
</body>
</html>

@adeneo That worked. Please create a new answer so I can mark it as accepted — Lucio, Jul 09 '13 at 19:01

score 4 · Accepted Answer · answered Jul 09 '13 at 19:03

4

You should be using .prop() when setting properties like checked, so change :

.attr('checked', true)

to

.prop('checked', true)

and stuff like :

$( '#checkall:checkbox' ).attr('checked')

with:

$( '#checkall:checkbox' ).is(':checked')

answered Jul 09 '13 at 19:03

adeneo

312,895
29
395
388

score 3 · Answer 2 · answered Jul 09 '13 at 19:01

3

Change all your .attr() to .prop().

jsFiddle example

As the docs say (beginning with 1.9):

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

answered Jul 09 '13 at 19:01

j08691

204,283
31
260
272

That is way it have worked for me before, because I'd used the `1.8` version, but now it doesn't work since the `1.9` version. Really interesting – Lucio Jul 09 '13 at 19:04

How to check and uncheck checkbox elements using jquery?

2 Answers2