我们都知道如何在 HTML 中形成一个复选框输入:
<input name="checkbox_name" id="checkbox_id" type="checkbox">
我不知道 - 选中复选框的技术正确值是什么?我已经看到所有这些工作:
答案是无所谓吗?我没有看到 spec 本身标记为正确 here 的答案的证据:
复选框(和单选按钮)是可以由用户切换的开/关开关。当设置了控制元素的选中属性时,开关处于“打开”状态。提交表单时,只有“打开”复选框控件才能成功。一个表单中的多个复选框可以共享相同的控件名称。因此,例如,复选框允许用户为同一属性选择多个值。 INPUT 元素用于创建复选框控件。
规范作者会说什么是正确的答案?请提供基于证据的答案。
严格来说,您应该输入一些有意义的东西 - 根据规范 here,最正确的版本是:
<input name=name id=id type=checkbox checked=checked>
对于 HTML,您还可以使用 empty attribute syntax、checked=""
,甚至可以简单地使用 checked
(对于更严格的 XHTML,这是 not supported)。
然而,实际上,大多数浏览器将支持引号之间的任何值。将检查以下所有内容:
<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"
上的类似问题。
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>
,因为它更短。
<input ... checked />
<input ... checked="checked" />
这些同样有效。在 JavaScript 中:
input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");
input.setAttribute("checked")
类型错误:无法在“元素”上执行“setAttribute”:需要 2 个参数,但只有 1 个存在
你想要这个我想:checked='checked'
已检查 已检查="" 已检查="已检查" 是等价的;
根据规范 checkbox '----ⓘ checked = "checked" or "" (空字符串) or empty 指定元素代表一个选中的控件。---'
这是一个非常疯狂的小镇,使检查为假的唯一方法是省略任何值。使用 Angular 1.x,您可以这样做:
<input type="radio" ng-checked="false">
如果您需要取消选中它,这会更加理智。
我认为这可能会有所帮助:
$('mycheckbox')[0].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');
<输入类型=“复选框”检查=“检查”>
$('mycheckbox')[0].checked = "true";
$('mycheckbox').val(true);
$('mycheckbox').attr('checked', 'checked');
就像所有输入一样,这个也有一个“值”属性。如果您将 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 之类的任何地方,或在本地进行测试。
选中复选框的技术正确值为零 (0),当未选中复选框时,未定义其索引。
好吧,我认为使用它并不重要(类似于 disabled 和 readonly),我个人使用 check="checked" 但如果您尝试使用 JavaScript 操作它们,则使用 true/false
disabled
和 readonly
也很重要)。如果您想用 JS 操作 属性,那么您仍然应该使用 checked
或 removeAttribute('checked')
。 checked
属性 采用 true
或 false
。
checked (checked)
表示“选中的属性可以具有值 'checked')。只有checked
是可接受的值,其他都不是。Boolean attributes 允许您省略 除了 值之外的所有内容,因此checked
和checked="checked"
都是可以接受的。checked
、checked=""
和checked="checked"
都可以。 w3.org/TR/html-markup/input.checkbox.html"checked"
,不带属性名称,并使其正常工作。checked
,请使用 autocomplete="off" 防止浏览器自动选中它。