如何使用 jquery 选中和取消选中复选框元素？答案

【问题标题】：How to check and uncheck checkbox elements using jquery?如何使用 jquery 选中和取消选中复选框元素？
【发布时间】：2013-07-07 12:32:50
【问题描述】：

我正在使用.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>

【问题讨论】：

用.prop替换.attr
@adeneo 成功了。请创建一个新答案，以便我将其标记为已接受

标签： jquery html checkbox

【解决方案1】：

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

.attr('checked', true)

到

.prop('checked', true)

诸如此类的东西：

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

与：

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

【讨论】：

【解决方案2】：

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

jsFiddle example

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

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

【讨论】：

这就是它以前对我有用的方式，因为我使用了1.8 版本，但现在它从1.9 版本开始不起作用。真的很有趣