Question

我正在使用.attr() jQuery函数来检查和取消选中复选框。它第一次工作，但后来又没有了。

在阅读了几个关于它的问题后，我无法做到这一点。例如this和this以及this

我在Chrome和Firefox上测试过它。我使用jsFiddle得到了同样的问题。

问题出在哪里？在JavaScript代码上，在HTML中还是在哪里？

这是所有代码：

<!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>

Answer 1

在设置.prop()等属性时，您应该使用checked，因此请更改：

.attr('checked', true)

到

.prop('checked', true)

等等：

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

使用：

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

Answer 2

将您的所有.attr()更改为.prop()。

<强> jsFiddle example

正如docs所说（从1.9开始）：

要检索和更改DOM属性，例如已选中，已选中，或禁用表单元素的状态，使用.prop（）方法。

如何使用jquery检查和取消选中复选框元素？

2 个答案: