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
– Lucio, Commented Jul 9, 2013 at 19:01

adeneo · Accepted Answer · 2013-07-09 19:03:01Z

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 9, 2013 at 19:03

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

j08691 · Accepted Answer · 2013-07-09 19:01:28Z

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 9, 2013 at 19:01

j08691

208k33 gold badges269 silver badges281 bronze badges

1 Comment

Lucio Over a year ago

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

Collectives™ on Stack Overflow

How to check and uncheck checkbox elements using jquery?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related