type true ejemplo javascript jquery html css checkbox

javascript - true - Posible asociar la etiqueta con la casilla de verificación sin usar "for=id"?



checkbox true (3)

Sé que a veces es bueno asociar una etiqueta con una casilla de verificación:

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

..pero ¿ tengo que usar una identificación para asociarlo?
La razón principal por la que me importa es porque me gusta poder hacer clic en una etiqueta para alternar el valor de la casilla de verificación, pero no me gusta la idea de usar una identificación para algo tan simple.

Creo que podría usar jQuery alternar el elemento anterior (casilla de verificación) de una etiqueta clicada, pero tal vez haya algo más simple que me falta. https://stackoverflow.com/a/2720771/923817 parecía una solución, pero el usuario dijo que no funciona en IE.


Demostración: 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>



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

En realidad, el atributo for se utilizó para los lectores de pantalla para las personas con discapacidad, por lo que no es útil para la accesibilidad para escribir sin el atributo.