Question

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

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

..但我有使用ID来关联它吗？我甚至关心的主要原因是因为我喜欢能够点击标签来切换复选框值，但是不喜欢使用id这么简单的想法。

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

Answer 1

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

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

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

Answer 2

演示：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>

Answer 3

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

实际上for属性用于屏幕阅读器给残疾人，因此对于没有属性的写入的可访问性没有用处

可以将标签与复选框关联而不使用“for = id”？

3 个答案: