在html5中将复选框设置为选中，我应该简单地使用checked（作为属性）还是checked="checked"（作为属性）？答案

【问题标题】：In html5 to set a checkbox as checked, should I simply use checked (as a property) or checked="checked" ( as an attribute)?在html5中将复选框设置为选中，我应该简单地使用checked（作为属性）还是checked="checked"（作为属性）？
【发布时间】：2021-02-26 22:54:40
【问题描述】：

目前在我们的插件中，我们将复选框设置为通过设置检查

<input type="checkbox" checked="checked" />

这是为了保持 xhtml 兼容性。我更习惯将checked设置为属性

<input type="checkbox" checked />

在html5中正确的做法是什么？我们还应该关心xhtml的兼容性吗？

【问题讨论】：

请注意，HTML5 中也不需要 />。
这不是一个属性，它仍然是一个属性。如果您在脚本中或其他任何将其称为属性的地方进行设置，则您只是在设置该属性。但在 HTML 和 XML 标记中，它被称为属性。

标签： html xhtml

【解决方案1】：

无论哪种情况，它都是一个属性。无论哪种情况，它都会在元素节点的 DOM 属性上设置一个值（相同的值，true）。

在大多数情况下，您使用哪种语法并不重要。不过有几点需要注意：

如果您在 XML 序列化（“XHTML5”）中使用 HTML5，则必须使用 checked="checked"。
在样式方面，使用属性选择器时的语法并不完全相同（较短的形式与 [checked=checked] 不匹配），但在实践中这并不重要：[checked] 在任何一种情况下都匹配选中的复选框。
笨拙的语法 checked="checked" 是 SGML 的保留，只是为了兼容性而包含在内，因此它可能会使您的代码看起来过时（这很少重要）。

【讨论】：

该语法是从 SGML 保留到 XHTML（与 XML 相对）中的吗？
checked="checked" 语法也被引入 XML。 HTML5 不是基于 SGML 或 XML，因此它可以以更自然的方式定义自己的语法：“布尔”属性只是一个名称（无需将其解释为 name=value 语法的简化形式）。
@DanDascalescu 使用 jQuery 设置属性时，您必须调用 .prop('checked', 'checked') 因为 prop('checked') 显然只会检索复选框和 attr 不起作用。 [属性与属性：api.jquery.com/prop]

【解决方案2】：

<!-- Default to unchecked -->
<input type="checkbox">

<!-- Default to checked, XHTML -->
<input type="checkbox" checked="checked" />

<!-- Default to checked, HTML5 -->
<input type="checkbox" checked>

来源：http://css-tricks.com/indeterminate-checkboxes/

【讨论】：

【解决方案3】：

Checked 是 HTML 5 中的布尔属性。真值表示该属性存在，而假值表示该属性不存在。如果存在，则其值应为空或设置为属性名称checked="checked"。以下任何一种形式都是正确的：

<input type="checkbox" checked="checked" />
<input type="checkbox" checked>

https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes

【讨论】：

这是为什么委员会设计（失败）可能是一件坏事的最好例子之一。值的真/假非常直观，但我猜 W3C 认为这还不够令人困惑。
@Gamadril 谢谢！我已经更新了答案中的 URL。将来，您可以随意进行这样的编辑。协作是使本网站上的答案很棒的原因。

【解决方案4】：

如果您正在创建使用 HTML5 的 XHTML 序列化的文档，则您关心 HTML5 中的 XHTML 兼容性，或者专门通过使用 application/xhtml+xml mime 类型提供文档，或者创建可以作为application/xhtml+xml 或 text/html（“普通”html mime 类型）。

如果您只使用text/html，那么您不需要关心XHTML 语法。但是，您可以在页面中嵌入 SVG 或 MathML 时使用 XML 样式的自关闭语法。（SVG 在最新的浏览器中得到广泛支持，MathML 则不太支持。）您也可以使用/> 来结束 void HTML 元素，例如 meta、link、input、img 等，但这没有效果不同于使用> 结束这些元素。

对术语的小评论。在标记中，通常来说checked 或checked="checked" 是一个“属性”。 “属性”是另一回事。

【讨论】：

【解决方案5】：

根据http://www.w3.org/TR/html-markup/input.checkbox.html，这是一个属性

【讨论】：