取消复选框的勾选，但属性仍保持选中状态。

Question

我有一个默认为选中状态（checked="checked"）的复选框。

但是如果我取消复选框的选中状态，然后执行以下操作：

alert($('#checkbox').attr('checked'));

无论是否被选中，它都会始终警示checked。

我已经在这里制作了一个代码片段以演示此功能。

如何获取复选框的实际选中状态（而不是默认代码中写的内容）？

- willdanceforfun

Answer 1

attr 绑定到DOM属性，然后保留初始值。如果您想检查状态，则必须使用 prop 代替：

$('#checkbox').prop('checked')

如果需要更多信息，您可以阅读jQuery文档中“属性 vs. 属性”一段，了解prop的相关内容。

- Samuel Caillerie

Answer 2

使用 prop() 替代原有方法，因为：

根据 W3C 表单规范，checked 属性是一个布尔属性，这意味着如果该属性存在，则相应的属性值为 true，即使该属性没有值或设置为空字符串或 "false"。所有布尔属性都是如此。

alert($('#checkbox').prop('checked'));

点击这里了解更多信息。

- Eli

Answer 3

实际的选中状态存储在checked属性中，因此请使用.prop()函数：

$('#checkbox').prop('checked')

- Anthony Grist

Answer 4

您可以做

alert($('#checkbox').prop('checked'));

您将获得true或false 要获取有关属性与prop的更多信息，请查看官方prop文档，特别是“属性与属性”一节。

根据W3C表单规范，checked属性是一个布尔属性，这意味着如果根本不存在该属性，则相应的属性为true-即使该属性没有值或设置为空字符串值或甚至" false"。所有布尔属性都是如此。

尽管如此，但关于checked属性最重要的概念是它不对应于checked属性。实际上，该属性对应于defaultChecked属性，并且只应用于设置复选框的初始值。checked属性值不随复选框状态而更改，而checked属性会改变。因此，确定复选框是否已选中的跨浏览器兼容方法是使用属性：

if ( elem.checked ) if ( $(elem).prop("checked") ) if ( $(elem).is(":checked") )

其他动态属性（例如selected和value）也是如此。

- Claudio Redi

Answer 5

使用jQuery中的is函数进行检查，它会返回true或false。

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

请查看这个修复代码的链接：http://codepen.io/anon/pen/mHqAI

- CR41G14

---

实际上，这会每次返回“false”。 - user229044

Answer 6

我希望能听到有人解释为什么会发生这种情况，但我会展示我一直以来用来修复它的方法。

$('#checkbox').get(0).checked

我正在使用本地DOM的解释来判断复选框是否被选中，只要#checkbox存在，这个方法就可以完美地工作。

- Bryan

---

属性和属性值有区别；当DOM从HTML构建时，它会获取属性的值并设置相应的属性。然后使用属性跟踪状态，而属性值不会更新以反映对属性的更改。 - Anthony Grist

Answer 7

您可以不使用jQuery来完成这个操作：

 alert(document.getElementById('checkbox').checked);

{{链接1：Codepen}}

- tckmn