HTML 复选框的选中属性的正确值是多少?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7851868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:12:08  来源:igfitidea点击:

What's the proper value for a checked attribute of an HTML checkbox?

htmlformscheckboxhtml-input

提问by buley

We all know how to form a checkbox input in HTML:

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

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

What I don't know -- what's the technically correct value for a checked checkbox? I've seen these all work:

我不知道的是——选中复选框的技术上正确的值是多少?我已经看到这些都有效:

<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">

Is the answer that it doesn't matter? I see no evidence for the answer marked as correct herefrom the specitself:

答案是无所谓吗?我从规范本身看不到此处标记为正确答案的证据:

Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. A switch is "on" when the control element's checked attribute is set. When a form is submitted, only "on" checkbox controls can become successful. Several checkboxes in a form may share the same control name. Thus, for example, checkboxes allow users to select several values for the same property. The INPUT element is used to create a checkbox control.

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

What would a spec writer say is the correct answer? Please provide evidence-based answers.

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

回答by Hannele

Strictly speaking, you should put something that makes sense - according to the spec here, the most correct version is:

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

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

For HTML, you can also use the empty attribute syntax, checked="", or even simply checked(for stricter XHTML, this is not supported).

对于 HTML,您还可以使用空属性语法, checked="",甚至可以简单地使用checked(对于更严格的 XHTML,不支持这样做)。

Effectively, however, most browsers will support just about any value between the quotes. All of the following will be checked:

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

<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">

And only the following will be unchecked:

并且只有以下内容不会被选中:

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

See also this similar question on disabled="disabled".

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

回答by Niet the Dark Absol

<input ... checked />
<input ... checked="checked" />

Those are equally valid. And in JavaScript:

这些同样有效。在 JavaScript 中:

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");

回答by Johnny Craig

you want this i think: checked='checked'

你想要这个我认为: checked='checked'

回答by wengeezhang

  1. checked
  2. checked=""
  3. checked="checked"

    are equivalent;

  1. 检查
  2. 选中=“”
  3. 检查=“检查”

    是等价的;



according to spec checkbox'----? checked = "checked" or "" (empty string) or empty Specifies that the element represents a selected control.---'

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

回答by Alexander Mills

It's pretty crazy town that the only way to make checked false is to omit any values. With Angular 1.x, you can do this:

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

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

which is a lot more sane, if you need to make it unchecked.

如果您需要取消检查,这会更加理智。

回答by Jeremy

I think this may help:

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



首先阅读 Microsoft 和 W3.org 的所有规范。


您会看到设置复选框的实际元素需要在 ELEMENT PROPERTY 上完成,而不是在 UI 或属性上。


$('mycheckbox')[0].checked$('mycheckbox')[0].checked

Secondly, you need to be aware that the checked attribute RETURNS a string "true", "false"
Why is this important? Because you need to use the correct Type. A string, not a boolean. This also important when parsing your checkbox.
$('mycheckbox')[0].checked = "true"

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

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

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

You also need to realize that the "checked" ATTRIBUTE is for setting the value of the checkbox initially. This doesn't do much once the element is rendered to the DOM. Picture this working when the webpage loads and is initially parsed.
I'll go with IE's preference on this one: <input type="checkbox" checked="checked"/>

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

Lastly, the main aspect of confusion for a checkbox is that the checkbox UI element is not the same as the element's property value. They do not correlate directly. If you work in .net, you'll discover that the user "checking" a checkbox never reflects the actual bool value passed to the controller. To set the UI, I use both $('mycheckbox').val(true);and $('mycheckbox').attr('checked', 'checked');

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



简而言之,对于选中的复选框,您需要:


Initial DOM: <input type="checkbox" checked="checked"><input type="checkbox" checked="checked">


Element Property: $('mycheckbox')[0].checked = "true";$('mycheckbox')[0].checked = "true";


UI:$('mycheckbox').val(true);$('mycheckbox').val(true);$('mycheckbox').attr('checked', 'checked');$('mycheckbox').attr('checked', 'checked');


回答by Austin Best

Well, to use it i dont think matters (similar to disabled and readonly), personally i use checked="checked" but if you are trying to manipulate them with JavaScript, you use true/false

好吧,我认为使用它无关紧要(类似于禁用和只读),我个人使用 check="checked" 但如果你试图用 JavaScript 操作它们,你使用 true/false