HTML中布尔属性的语法是什么,例如选中的复选框?

30

听起来有点愚蠢,但是我想知道在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规范似乎暗示仅存在checked属性是正确的。这是否意味着checked =“false”和checked =“no”仍将选中框?


可能是一个重复问题,参考HTML复选框的checked属性应该赋什么值? - Ciro Santilli OurBigBook.com
9个回答

35

在HTML中:

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

对于XHTML,您必须使用属性/值匹配对:

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

2
checked = "" 也是有效的。更多阅读材料:http://www.whatwg.org/specs/web-apps/current-work/#boolean-attributes - Tom Pietrosanti

7

HTML:

根据W3C页面上的说法,它们中的任何一个都应该是正确的。只需要设置checked属性即可。

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

实际上,无论是   checked,checked =“whatever”还是   checked =“checked”。它正在检查   布尔值,因此它要么为真   (设置)或假(未设置)。

XHTML:

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


4
根据HTML规范,正确的写法是:

根据HTML规范,正确的写法是:

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

我使用这些技术,jQuery与它们完美配合。


实际上,无论是checked、checked="whatever"还是checked="checked"都没关系。它检查布尔值,所以要么为真(已设置),要么为假(未设置)。 - Ondrej Slinták

2
一项快速测试表明,jQuery将任何设置为“checked”的值视为相等。
alert( $('input:checked').length );
// Returns 5

即使是空字符串和负值。


1

存在"checked"属性指定状态。值是无关紧要的/不需要的。

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

这是我的建议


3
价值是重要的 - 它只能被“检查”(浏览器只是校正错误而已。不要依赖错误恢复功能,应编写无误的代码)。如果你正在编写HTML(而不是XHTML),你可以(并且应该)省略名称(和等号和引号),只保留值即可。(布尔属性很奇怪。) - Quentin
正如您从帖子中的代码所看到的,我并不是说该值不应存在。我只是在说,您可以编写checked="hello"或checked="maybe",仍然可以获得所需的结果。 - kazanaki
但是你说得对,我们应该针对XHTML而不仅仅是HTML。 - kazanaki

1

1

我建议在Chrome,Firefox和Opera上使用时要小心。 Chrome似乎存在复选框显示问题,Firefox区分大小写的样式和标签,而Opera似乎运行得很好,但更新速度较慢。这可能只是浏览器版本的问题。

除此之外,我相信它应该可以在所有浏览器中良好地运行<input type="checkbox" checked /> 。唯一的区别就是各个浏览器显示网页内容的方式。


1
W3C 规范似乎暗示只要存在 checked 属性就是正确的。这是否意味着 checked="false" 和 checked="no" 仍会选中复选框呢?
没错。这就是为什么使用 checked="true" 和 checked="yes" 是个坏主意,它们暗示了 checked="false" 和 checked="no" 不会选中该框。

0

HTML5规范:

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

元素上的布尔属性的存在表示为true值,而属性的缺失则表示false值。

如果属性存在,则其值必须为空字符串或与属性的规范名称的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 />

建议

如果您关心编写有效的XHTML,请使用boolean="boolean",因为<tag boolean>是无效的XHTML(但有效的HTML),而其他替代方案不够易读。否则,只需使用<tag boolean>,因为它更短。


这个设计背后的想法是什么?它似乎违反直觉,我想不出与仅使用布尔值相比的任何优势。例如,我正在使用一个渲染引擎(VisualForce/Salesforce),它不支持这种表示法。 - NSjonas
@NSjonas 不是! :-) 可能因为更短,更容易写? - Ciro Santilli OurBigBook.com

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接