【问题标题】: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" 仍然会选中该框?

【问题讨论】:

标签: jquery html checkbox


【解决方案1】:

在 HTML 中:

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

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

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

【讨论】:

【解决方案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 似乎运行良好但更新速度很慢。可能只是正在使用的浏览器版本。

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

        【讨论】:

          【解决方案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&lt;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",因为 &lt;tag boolean&gt; 是无效的 XHTML(但有效的 HTML)并且其他替代方案的可读性较差。否则,只需使用 &lt;tag boolean&gt;,因为它更短。

            【讨论】:

            • 知道这个设计背后的想法吗?这似乎违反直觉,我想不出仅使用布尔值有什么优势。例如,我正在使用不支持这种表示法的渲染引擎 (VisualForce/Salesforce)。
            • @NSjonas 不! :-) 可能是因为写得更短?
            猜你喜欢
            • 2011-12-12
            • 1970-01-01
            • 1970-01-01
            • 2011-05-07
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多