1

我正在使用.attr()jQuery 函数来选中和取消选中复选框。它第一次工作，但后来它不再。

在阅读了几个关于它的问题后，我无法完成这项工作。例如这个和这个和这个

我在 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>
4

2 回答 2

4

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

.attr('checked', true)

至

.prop('checked', true)

和类似的东西：

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

和：

$( '#checkall:checkbox' ).is(':checked')
于 2013-07-09T19:03:01.743 回答
3

将所有更改.attr()为.prop().

jsFiddle 示例

正如文档所说（从 1.9 开始）：

要检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，请使用 .prop() 方法。

于 2013-07-09T19:01:28.600 回答