it-swarm-pt.tech

Possível associar etiqueta à caixa de seleção sem usar "for = id"?

Sei que às vezes é bom associar um rótulo a uma caixa de seleção:

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

..mas eu tenho para usar um id para associá-lo?
O principal motivo pelo qual me importo é porque gosto de clicar em um rótulo para alternar o valor da caixa de seleção, mas não gosto da idéia de usar um ID para algo tão simples.

Eu acho que eu poderia usar o jQuery para alternar o elemento anterior (caixa de seleção) de um rótulo clicado, mas talvez haja algo mais simples que esteja faltando. https://stackoverflow.com/a/2720771/923817 parecia uma solução, mas o usuário disse que não funciona no IE.

65
D.Tate

Sim, coloque a entrada dentro da etiqueta.

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

Consulte associação implícita de rótulo nas especificações HTML.

156
Madara Uchiha

Demonstração: 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>
3
egor.xyz
<label for="something">this is label text</label>
<input id="something" type="checkbox" value="somevalue" />

na verdade, o atributo for foi usado para leitores de tela para pessoas com deficiência, portanto, não é útil para a acessibilidade escrever sem o atributo

1
Web Designer cum Promoter