CODEWITHSUNDEEP
jqueryhtmlcheckbox
Lucio
Lucio

Reputation: 5408

How to check and uncheck checkbox elements using jquery?

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>

Upvotes: 1

Views: 829

Answers (2)

adeneo
adeneo

Reputation: 318182

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')

Upvotes: 4

j08691
j08691

Reputation: 207881

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.

Upvotes: 3

Related Questions