可以在不使用“for=id”的情况下将标签与复选框相关联吗？

Posted 2023-02-22

【中文标题】可以在不使用“for=id”的情况下将标签与复选框相关联吗？

【英文标题】：Possible to associate label with checkbox without using "for=id"?

【发布时间】：2012-01-22 04:24:35

【问题描述】：

我知道有时将标签与复选框相关联是件好事：

<input id="something" type="checkbox" value="somevalue" />
<label for="something">this is label text</label>

..但是我 必须 使用 id 来关联它吗？ 我什至关心的主要原因是因为我喜欢能够单击标签来切换复选框值，但不喜欢将 id 用于如此简单的事情的想法。

我想我可以使用 jQuery 切换单击标签的前一个元素（复选框），但也许我缺少一些更简单的东西。 https://***.com/a/2720771/923817 看起来像是一个解决方案，但用户说它在 IE 中不起作用。

【问题讨论】：

如果您正在寻找其他解决方案，请查看：***.com/questions/2703356/…

【参考方案1】：

演示：JsFiddle

.c-custom-checkbox 
  padding-left: 20px;
  position: relative;
  cursor: pointer;

.c-custom-checkbox input[type=checkbox] 
  position: absolute;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 15px;
  width: 15px;
  padding: 0;
  border: 0;
  left: 0;

.c-custom-checkbox .c-custom-checkbox__img 
  display: inline;
  position: absolute;
  left: 0;
  width: 15px;
  height: 15px;
  background-image: none;
  background-color: #fff;
  color: #000;
  border: 1px solid #333;
  border-radius: 3px;
  cursor: pointer;

.c-custom-checkbox input[type=checkbox]:checked + .c-custom-checkbox__img 
  background-position: 0 0;
  background-color: tomato;

<label class="c-custom-checkbox">
  <input type="checkbox" id="valueCheck" />
  <i class="c-custom-checkbox__img"></i>Some Label
</label>

【参考方案2】：

是的，将输入放在标签内。

<label><input type=checkbox name=chkbx1> Label here</label>

请参阅 html 规范中的 implicit label association。

【讨论】：

+1 最佳解决方案 - 请参阅 HTML Spec for implicit label association。

这在 IE 中有效吗？ ***.com/a/2720771/923817 建议没有

限制（根据规范）：请注意，当表格用于布局时，不能使用此技术，其中一个单元格中的标签和另一个单元格中的关联控件。我>

IE 在 IE 7 中开始支持此功能。

它有效！我打开 IE9 并使用 F12 Developer Tools 测试了 IE 7/8/9 浏览器和文档模式。工作得很好。太好啦！我没有更多的身份关联。谢谢大家

【参考方案3】：

<label for="something">this is label text</label>
<input id="something" type="checkbox" value="somevalue" />

实际上 for 属性是用于残疾人屏幕阅读器的，所以没有 for 属性对无障碍书写没有用处

【讨论】：

使用包含在标签中的输入不会干扰屏幕阅读器，除非它们写得不好。这是一个非常简单的解析案例。

@JoaoCarlos From w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html#ua2.18.1：“HTML 和 XHTML 规范允许隐式和显式标签。但是，一些辅助技术不能正确处理隐式标签（例如，First name )。"

不确定这是否仍然是现代浏览器 + 屏幕阅读器的问题。

您应该如何处理列表中的标记元素。在 React 中这种情况一直在发生，并且在 htmlFor 和 id 中使用索引或 id 非常笨拙且非常尴尬。