在 HTML5 中选中和取消选中复选框的正确方法是啥？

Posted 2023-03-05

【中文标题】在 HTML5 中选中和取消选中复选框的正确方法是啥？

【英文标题】：What is the proper way to check and uncheck a checkbox in HTML5?在 HTML5 中选中和取消选中复选框的正确方法是什么？

【发布时间】：2012-09-23 22:00:00

【问题描述】：

查看了 html 规范，但无法完全理解：http://www.w3.org/TR/html5/the-input-element.html#attr-input-checked

在 HTML 中检查复选框的正确方法是什么（非动态）？

checked="true"
checked="checked"

取消选中复选框的正确方法是什么？

<input type="checkbox" /> with no checked attribute
checked="false"
checked="none"

在哪里检查 HTML 规范以选中/取消选中复选框？

【参考方案1】：

<input type="checkbox" checked />

HTML5 不要求属性有值

【讨论】：

其实这不是答案，他们问“uncheck复选框的正确方法是什么？”

【参考方案2】：

<form name="myForm" method="post">
  <p>Activity</p> 
  skiing:  <input type="checkbox" name="activity" value="skiing"  checked="yes" /><br /> 
  skating: <input type="checkbox" name="activity" value="skating" /><br /> 
  running: <input type="checkbox" name="activity" value="running" /><br /> 
  hiking:  <input type="checkbox" name="activity" value="hiking"  checked="yes" />
</form>

【参考方案3】：

您可以在w3schools 参考此页面，但基本上您可以使用以下任何一种：

<input checked>
<input checked="checked">
<input checked="">

【讨论】：

是的，试试看，你会看到

其实这不是答案，他们问“uncheck复选框的正确方法是什么？”

【参考方案4】：

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

或者干脆

<input type="checkbox" checked />

选中复选框。 未选中的复选框没有选中属性 (<input type="checkbox" />)。

参考：http://www.w3.org/TR/html-markup/input.checkbox.html#input.checkbox.attrs.checked

【讨论】：

或者<input type="checkbox" checked="" />也被选中。

虽然两者都是正确的，但我个人的观察是 checked="checked" 考虑了基于鼠标事件的检查和取消检查，而 checked 是基于编程的。

链接已损坏，您介意更新一下吗？在您的答案中引用会很好，这样如果链接再次断开，阅读的人无需进一步搜索即可看到解释

至少我们可以用w3schools.com/tags/att_input_checked.asp支持这个答案

【参考方案5】：

根据 HTML5 草案，checked 属性是“boolean attribute”，“元素上存在布尔属性表示真值，不存在该属性表示假值。”它是重要且足够的属性的名称。因此，要使复选框最初被选中，您可以使用

<input type=checkbox checked>

默认情况下，在没有checked 属性的情况下，复选框最初是未选中的：

<input type=checkbox>

以这种方式保持简单，但如果您需要符合 XML 语法（即在 XHTML 线性化中使用 HTML5），则不能单独使用属性名称。然后允许的（根据 HTML5 草案）值是空字符串和字符串 checked，不区分大小写。示例：

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

【参考方案6】：

在 jQuery 中：

勾选复选框：

$("#checkboxid").attr("checked","checked");

取消选中复选框：

$("#checkboxid").removeAttr("checked");

其他答案暗示了解决方案，并将您指向文档，进一步挖掘后您将获得此答案。 Jukka K. Korpela 有理由这是正确答案，基本上我按照他的链接，然后查找 jQuery 文档以获得该结果。只是想我会为以后发现这篇文章的人省去这些额外的步骤。

【讨论】：

你应该使用 .prop()，而不是 .attr()

.attr() 不起作用，并且 setAttribute 在您通过 removeAttr 删除属性后抱怨。对我有用的是：w3schools.com/jsref/prop_checkbox_checked.asp

【参考方案7】：

在 jQuery 中对 Robert 的回答 http://jsfiddle.net/ak9Sb/ 的补充回答

在获取/设置复选框状态时，可能会遇到以下现象：

.trigger("click");

检查未选中的复选框，但不添加选中的属性。 如果您使用触发器，请不要尝试使用“checked”属性获取状态。

.attr("checked", "");

不取消选中复选框...

【参考方案8】：

您可以在父表单上使用 autocomplete="off"，因此如果您重新加载页面，复选框将不会被自动选中

【参考方案9】：

我不完全确定为什么之前没有提到这一点，但对我来说，以下工作：

将其设置为checked：

<input type="checkbox" checked>

将其设置为unchecked：

<input type="checkbox" unchecked>

（我遇到了重新加载页面后复选框仍然处于选中状态的问题。使用unchecked 解决了我的问题，因此它可能对其他人有用。）

【讨论】：

成功了！ if (in_array($row["ID"], $array)) $m = 'checked';否则 $m = '未选中';