能否在不使用“for=id”的情况下将标签与复选框关联？

Question

我知道有时候将标签与复选框关联是比较好的：

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

但是我必须使用一个id来关联它吗？
我之所以关心这个问题，是因为我想通过单击标签来切换复选框的值，但不喜欢为这么简单的事情使用id的想法。

我想我可以使用jQuery来切换单击标签之前的元素（复选框），但是可能有更简单的方法我不知道。 https://dev59.com/AHE85IYBdhLWcg3wikS-#2720771 看起来是一个解决方案，但用户说在IE中不起作用。

- D.Tate

---

如果您正在寻找其他解决方案，请查看以下链接： https://dev59.com/0nE85IYBdhLWcg3wl0nF#69839870 - ZuteZz

Answer 1

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

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

请参考HTML规范中关于隐式标签关联的说明。

- Madara's Ghost

---

最佳解决方案是查看HTML规范中的隐式标签关联部分。 - SliverNinja - MSFT

这个在IE里能用吗？https://dev59.com/AHE85IYBdhLWcg3wikS-#2720771的回答表明不能。 - D.Tate

限制（根据规范）：请注意，当表格被用作布局时，本技术不能使用；即标签在一个单元格中，其对应的控件在另一个单元格中。 - SliverNinja - MSFT

它可以工作了！我打开IE9并使用F12开发人员工具测试IE 7/8/9浏览器和文档模式。运行良好。万岁！我不再需要ID关联。谢谢大家。 - D.Tate

这也确保复选框和标签被包装在一起。 - Adam

Answer 2

Demo: 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>

- egor.xyz

Answer 3

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

实际上，for属性是用于屏幕阅读器的残障人士，因此如果没有for属性，对于无障碍性来说是没有用的。

- Web Designer cum Promoter

---

使用标签内包含的输入不会影响屏幕阅读器，除非它们编写得很差。这是一个相当简单的解析情况。 - Joao Carlos

@JoaoCarlos 来自 https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html#ua2.18.1: "HTML和XHTML规范允许隐式和显式标签。然而，一些辅助技术不能正确处理隐式标签（例如，<label>名字<input type="text" name="firstname"></label>）"。 - Steve Harrison

不确定现代浏览器和屏幕阅读器是否仍存在此问题。 - Steve Harrison

在列表中，标记元素应该怎么处理？在React中，这种情况经常发生，使用索引或id在htmlFor和id中非常笨拙和尴尬。 - Jordan