布尔属性的语法是啥，例如一个选中的复选框，在 HTML 中？

Posted 2023-03-05

技术标签:

【中文标题】布尔属性的语法是啥，例如一个选中的复选框，在 HTML 中？【英文标题】：What is the syntax for boolean attributes, e.g. a checked checkbox, in HTML?布尔属性的语法是什么，例如一个选中的复选框，在 HTML 中？ 【发布时间】：2011-02-21 22:17:28 【问题描述】：

听起来有点像一个愚蠢的问题，但我想知道在 html 中说明复选框已选中/未选中的最佳方式是什么。

我见过很多不同的例子：

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

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

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

哪些浏览器可以与其中的哪些一起使用，最重要的是，jQuery 是否可以确定在所有 3 个中选中了哪个框？

编辑： W3C 规范似乎暗示只有经过检查的 attr 是正确的。这是否意味着checked="false" 和checked="no" 仍然会选中该框？

【问题讨论】：

What's the proper value for a checked attribute of an HTML checkbox?的可能重复 【参考方案1】：

在 HTML 中：

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

对于 XHTML，您必须使用属性/值匹配对：

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

【讨论】：

checked="" 也是有效的。补充阅读材料：whatwg.org/specs/web-apps/current-work/#boolean-attributes【参考方案2】：

HTML：

正如他们在W3C page 上所说的那样，他们中的任何一个都应该是正确的。只需设置checked 属性即可。

正如我在 Coronatus 的评论中所写：

其实没关系检查，检查=“随便”或检查=“检查”。正在检查布尔值，所以它要么是真的 (设置) 或 false (未设置)。

XHTML：

您必须指定它，所以checked="checked" 是唯一有效的。大多数浏览器可能会正确解析 HTML 值，但您的页面仍然会出现错误。

【讨论】：

【参考方案3】：

根据HTML spec，正确的是：

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

我使用这个并且 jQuery 与它们完美配合。

【讨论】：

其实不管是checked，checked="whatever"还是checked="checked"都没有关系。它正在检查布尔值，所以它要么是真（设置）要么是假（未设置）。【参考方案4】：

快速测试表明，jQuery 将任何值设置为被检查。

alert( $('input:checked').length );
// Returns 5

即使是空字符串和负值。

【讨论】：

【参考方案5】：

根据W3C recommendations，您的第一个建议是正确的。

【讨论】：

【参考方案6】：

“已检查”属性的存在指定了状态。该值无关紧要/不需要。

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

是我的建议

【讨论】：

值很重要——它只能被“检查”（浏览器只是对垃圾进行错误纠正。不要依赖错误恢复，而是编写无错误代码）。如果您正在编写 HTML（而不是 XHTML），您可以（并且应该）省略名称（以及等号和引号），只留下值。（布尔属性很奇怪。）正如您从帖子上的代码中看到的那样，我并不是说该值不应该存在。我只是说你可以写checked="hello" 或checked="maybe" 仍然得到想要的结果。但是你是对的，我们应该针对 XHTML 而不仅仅是 HTML。【参考方案7】：

我会小心在 chrome、firefox 和 opera 上使用它。 Chorme 似乎存在复选框出现问题，Firefox 对样式和标签区分大小写，opera 似乎运行良好但更新速度很慢。可能只是正在使用的浏览器版本。

除此之外，我认为它应该在所有这些中运行 <input type="checkbox" checked /> 就好了。唯一的区别实际上是各个浏览器在页面上显示内容的方式。

【讨论】：

【参考方案8】：

W3C 规范似乎暗示只有经过检查的 attr 是正确的。这是否意味着checked="false" 和checked="no" 仍然会选中该框？

没错。这就是为什么使用checked="true" 和checked="yes" 是一个坏主意，它们暗示checked="false" 和checked="no" 不会选中该框。

【讨论】：

【参考方案9】：

HTML5 规范：

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes：

元素上存在布尔属性表示真值，不存在该属性表示假值。

如果该属性存在，其值必须是空字符串或与属性的规范名称匹配的不区分大小写的 ASCII 值，并且没有前导或尾随空格。

结论：

让boolean 成为标签tag 的布尔属性，如checked 和<input type="checkbox"。

以下是有效、等效和真实的：

<tag boolean />
<tag boolean="" />
<tag boolean="boolean" />
<tag boolean="BoOlEaN" />

以下是无效：

<tag boolean="0" />
<tag boolean="1" />
<tag boolean="false" />
<tag boolean="true" />

属性的缺失是 false 的唯一有效语法：

<tag />