466

我们都知道如何在 HTML 中形成一个复选框输入：

<input name="checkbox_name" id="checkbox_id" type="checkbox">

我不知道 - 选中复选框的技术正确值是什么？我已经看到所有这些工作：

<input name="checkbox_name" id="checkbox_id" type="checkbox" checked>
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="on">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="yes">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="checked">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="true">

答案是无所谓吗？我从规范本身看不到任何证据表明此处标记为正确的答案：

复选框（和单选按钮）是可以由用户切换的开/关开关。当设置了控制元素的选中属性时，开关处于“打开”状态。提交表单时，只有“打开”复选框控件才能成功。一个表单中的多个复选框可以共享相同的控件名称。因此，例如，复选框允许用户为同一属性选择多个值。INPUT 元素用于创建复选框控件。

规范作者会说什么是正确的答案？请提供基于证据的答案。

4

10 回答 10

477

严格来说，你应该放一些有意义的东西——根据这里的规范，最正确的版本是：

<input name=name id=id type=checkbox checked=checked>

对于 HTML，您还可以使用空属性语法, checked=""，甚至简单地使用checked（对于更严格的 XHTML，不支持此功能）。

然而，实际上，大多数浏览器将支持引号之间的任何值。将检查以下所有内容：

<input name=name id=id type=checkbox checked>
<input name=name id=id type=checkbox checked="">
<input name=name id=id type=checkbox checked="yes">
<input name=name id=id type=checkbox checked="blue">
<input name=name id=id type=checkbox checked="false">

并且只有以下内容将被取消选中：

<input name=name id=id type=checkbox>

另请参阅 上的类似问题disabled="disabled"。

于 2011-10-21T15:51:51.430 回答
67

HTML5 规范：

http://www.w3.org/TR/html5/forms.html#attr-input-checked：

禁用的内容属性是一个布尔属性。

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

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

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

结论：

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

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

以下是无效的：

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

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

<input />

推荐

如果您关心编写有效的 XHTML，请使用checked="checked", 因为<input checked>是无效的 XHTML（但有效的 HTML），而其他替代方案的可读性较差。否则，只需使用它，<input checked>因为它更短。

于 2014-07-05T16:26:13.813 回答
38 
<input ... checked />
<input ... checked="checked" />

这些同样有效。在 JavaScript 中：

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");
于 2011-10-21T15:42:54.167 回答
7

你想要这个我想： checked='checked'

于 2011-10-21T15:42:32.543 回答
6
  1. 检查
  2. 勾选=“”

  3. 检查=“检查”

    是等价的；

根据规范checkbox '----ⓘ checked = "checked" or "" (空字符串) or empty 指定元素代表一个选中的控件。---'

于 2014-06-05T03:41:49.507 回答
3

这是一个非常疯狂的小镇，使检查为假的唯一方法是省略任何值。使用 Angular 1.x，您可以这样做：

  <input type="radio" ng-checked="false">

如果您需要取消选中它，这会更加理智。

于 2017-03-14T22:37:08.417 回答
2

我认为这可能会有所帮助：

首先阅读来自 Microsoft 和 W3.org 的所有规范。
您会看到设置复选框的实际元素需要在 ELEMENT PROPERTY 上完成，而不是在 UI 或属性上完成。
$('mycheckbox')[0].checked

其次，你需要知道checked属性返回一个字符串“true”，“false”
为什么这很重要？因为你需要使用正确的类型。字符串，而不是布尔值。这在解析复选框时也很重要。
$('mycheckbox')[0].checked = "true"

if($('mycheckbox')[0].checked === "true"){ //do something }

您还需要意识到“已选中”属性最初用于设置复选框的值。一旦元素被渲染到 DOM，这并没有多大作用。当网页加载并最初被解析时，想象一下这个工作。
我会选择 IE 对此的偏好：<input type="checkbox" checked="checked"/>

最后，复选框混淆的主要方面是复选框 UI 元素与元素的属性值不同。它们不直接相关。如果您在 .net 中工作，您会发现用户“选中”复选框永远不会反映传递给控制器​​的实际布尔值。要设置 UI，我同时使用$('mycheckbox').val(true);和$('mycheckbox').attr('checked', 'checked');

简而言之，对于选中的复选框，您需要：
Initial DOM: <input type="checkbox" checked="checked">
Element Property: $('mycheckbox')[0].checked = "true";
UI: $('mycheckbox').val(true);and$('mycheckbox').attr('checked', 'checked');

于 2019-01-31T20:20:45.407 回答
1

就像所有输入一样，这个也有一个“值”属性。如果您将value属性与属性一起设置name，它将${name}=${value}在标头中发送。假设我们有一个包含一堆东西的表单，我们希望用户决定他们拥有什么角色，我们可以使用一个复选框。最简单的方法是设置将传递给服务器的“值”属性。像这样：

<form action="/server" method="post">
    <label>Are you a person?</label>
    <input type="checkbox" name="my_checkbox" value="is_person">
</form>

服务器将收到以下信息： my_checkbox=is_person 但前提是选中该复选框。这将是 my_checkbox= 如果它是空的。

radio这与输入完全相同。

但是..我感觉这不是您要的...所以请装箱，我将在下面写下另一个答案：

如果该checked属性设置为任何值（甚至false），无论如何它都会被激活。该checked属性没有指定值，如果设置为任何值，则默认为“true”（即使您将其设置为false）。

例如：

<form action="/server" method="post">
    <label>Are you a person?</label>
    <input type="checkbox" checked="false"> <!--Still checked-->
</form>

即使设置为 false 也会被检查。

<form action="/server" method="post">
    <label>Are you a person?</label>
    <input type="checkbox" checked="asjdiasjiasdjoasi"> <!--Still checked-->
</form>

这样做也会检查它。没关系——只要设置了它就会被检查。

希望这能回答您的问题，checked无论属性的值如何，该属性都会检查输入。

你可以在这里测试它：https : //battledash-2.github.io/Live-IDE/ 或者像 repl.it 这样的任何地方，或者在本地。

于 2021-04-06T16:56:31.287 回答
0

选中复选框的技术正确值为零 (0)，当未选中复选框时，未定义其索引。

于 2021-08-02T19:51:39.693 回答
-3

好吧，我认为使用它并不重要（类似于 disabled 和 readonly），我个人使用 check="checked" 但如果您尝试使用 JavaScript 操作它们，则使用 true/false

于 2011-10-21T15:43:52.917 回答