checked = "checked" vs checked = true

Question

以下两种用法有什么区别？

document.getElementById('myRadio').checked = "checked";

并且

document.getElementById('myRadio').checked = true;

对我来说，这两种方式的行为都是相同的。但我只是好奇为什么存在两种做法。

哪一种方法会是理想的使用方式？我需要支持IE7及更高版本。

- hop

Answer 1

document.getElementById('myRadio').checked是一个布尔值，它应该是true或false

document.getElementById('myRadio').checked = "checked";将字符串转换为布尔值，即为true。

document.getElementById('myRadio').checked = true;直接赋值true，不需要转换。

使用true会略微更高效，并且对于维护者来说更具有意图表达的能力。

- Quentin

Answer 2

元素既有一个名为 checked 的属性，也有一个名为 checked 的属性。该属性用于确定当前状态。

属性是一个字符串，而属性则是一个布尔值。当元素从HTML代码创建时，属性设置为标记中的值，属性基于属性的值进行设置。

如果标记中没有属性的值，则属性变为 null，但属性始终是true或false，因此变为false。

当您设置属性时，应使用布尔值：

document.getElementById('myRadio').checked = true;

如果你设置属性，你需要使用一个字符串。

document.getElementById('myRadio').setAttribute('checked', 'checked');

请注意，设置属性也会改变属性值，但设置属性值不会改变属性。

还要注意，无论将属性设置为什么值，属性都会变为true。即使使用空字符串或null，设置属性意味着选中它。使用removeAttribute通过属性取消选中元素:

document.getElementById('myRadio').removeAttribute('checked');

- Guffa

---

属性和特性之间的区别解释得很好。谢谢！ - Mac

Answer 3

原始的checked属性（在HTML 4及之前）不需要值 - 如果存在，则元素被“选中”，否则它未被选中。

然而，这对于随后的XHTML并不有效。

标准提议使用checked="checked"作为真的条件 - 所以你发布的两种方式最终都会做同样的事情。

实际上，你使用哪个并不重要 - 使用最有意义的那个，并坚持下去（或与团队达成一致）。

- Oded

---

不，在HTML 4及更早版本中，它确实需要一个值...可选的是名称。即checked="checked"是完整版本，但是您可以省略checked="和"，只留下值。（SGML可能会变得奇怪！） - Quentin

问题正在询问DOM属性，而不是HTML规则。 - Quentin

@Quentin - 好的，虽然这几乎是一种关于语义学的争论。 - Oded

Answer 4

document.getElementById('myRadio') 返回的是 DOM 元素，本文中我将引用它作为 elem。

elem.checked 访问了 DOM 元素中名为 checked 的属性。这个属性始终是一个布尔值。

在编写 HTML 代码时，对于 XHTML 格式，你需要使用 checked="checked"；而在 HTML 中，你可以直接使用 checked。当设置属性（使用 .setAttribute('checked', 'checked')）时，你需要提供一个值，因为一些浏览器将空值视为不存在。

然而，由于你已经有了 DOM 元素，所以无需设置属性，而是可以直接使用更加方便的布尔属性。由于在布尔上下文中，非空字符串被视为 true，因此将 elem.checked 设置为 'checked' 或其他任何非 falsy 值（甚至是 'false' 或 '0'），都会选中复选框。不过，没有理由不使用 true 和 false，所以请坚持使用正确的值。

- ThiefMaster

Answer 5

checked属性是一个布尔值，因此除了布尔值false之外的其他"string"都会转换为true。

任何字符串值都将为真。同时，存在该属性也会使其为真：

<input type="checkbox" checked>

你可以使用JS在DOM中进行布尔更改，以使其取消选中。

因此，答案是：它们是相等的。

w3c

- antyrat

---

你把JavaScript DOM属性和HTML属性混淆了（并且还搞混了浏览器错误恢复）。 - Quentin