Можно связать метку с флажком без использования "for=id"?

Question

Можно связать метку с флажком без использования "for=id"?

Я знаю, что иногда хорошо связать метку с флажком:

<input id="something" type="checkbox" value="somevalue" />

<label for="something">this is label text</label>

..но разве я есть чтобы использовать идентификатор, чтобы связать его?

Основная причина, по которой я даже забочусь, заключается в том, что мне нравится нажимать метку, чтобы переключать значение флажка, но мне не нравится идея использования идентификатора для чего-то настолько простого.

Я думаю, я мог бы использовать jQuery переключить предыдущий элемент (флажок) нажатой метки, но, возможно, есть что-то проще я недостающий. https://stackoverflow.com/a/2720771/923817 выглядело как решение, но пользователь сказал, что это не работает в IE.

510 3

jQuery javascript html css checkbox

3 ответов:

Comments

Ничего не найдено.

Madara Uchiha · Accepted Answer · 2015-08-23 15:39:16

да, поместите входные данные внутри метки.
<label><input type=checkbox name=chkbx1> Label here</label>
посмотреть неявная ассоциация меток в спецификациях HTML.

egor.xyz · Accepted Answer · 2016-03-30 13:17:19

демо: 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>

Web Designer cum Promoter · Accepted Answer · 2013-11-12 09:36:04

<label for="something">this is label text</label>
<input id="something" type="checkbox" value="somevalue" />
на самом деле атрибут for использовался для чтения с экрана для инвалидов, поэтому не полезен для доступности для записи без атрибута