取消选中一个复选框，但该属性仍保持选中状态

Question

我有一个默认选中的复选框=“已选中”。

如果我取消选中该复选框，然后执行类似

的操作

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

无论是否检查，它都会始终提醒checked。

I've made a codepen of this functionality over here

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

Answer 1

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

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

有关详细信息，请阅读prop的jQuery文档的“属性与属性”段落。

Answer 2

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

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

Answer 3

你可以做到

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

您将获得true或false

要获取有关attr vs prop的更多信息，请查看官方prop文档，尤其是属性与属性

部分

  

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

     

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

     

if（elem.checked）

     

if（$（elem）.prop（“checked”））

     

if（$（elem）.is（“：checked”））

     

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

Answer 4

使用prop()代替：

  

根据W3C表单规范，checked属性为a   boolean属性，表示相应的属性为true   该属性完全存在 - 即使例如属性   没有值或被设置为空字符串值甚至“假”。这是   所有布尔属性都为true。

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

了解更多here

Answer 5

使用jquery中的is函数进行检查，这将给出true或false

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

查看代码http://codepen.io/anon/pen/mHqAI

的此修复程序

Answer 6

我很想听到有人解释为什么会发生这种情况，但我会告诉你我一直在做些什么来解决这个问题

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

我正在使用本机dom对是否实际检查复选框的解释，只要#checkbox存在，这就完美无缺

Answer 7

你可以在没有jQuery的情况下做到这一点：

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

Codepen