Estoy tratando de asegurarme de que mi aplicación web sea compatible con HTML5 y al hacerlo descubrí un error HTML5. Actualmente estoy usando el siguiente código:

<label><div class="someClass"><input type="checkbox" name="ChkBox[]" value="0">Some text goes here</div></label>
<label><div class="someClass"><input type="checkbox" name="ChkBox[]" value="1">Some text goes here</div></label>
<label><div class="someClass"><input type="checkbox" name="ChkBox[]" value="2">Some text goes here</div></label>

Mi intención es crear un contenedor utilizando un div y css para diseñar, de modo que cuando el usuario hace clic en cualquier parte del contenedor, la casilla correspondiente se marca automáticamente. ¿Existe un mejor método para hacerlo sin una gran cantidad de javascript o jquery? Tenga en cuenta que la cantidad de casillas de verificación variará.

-1
Jecker 13 may. 2016 a las 20:10

3 respuestas

La mejor respuesta

Establezca display:block para la etiqueta

label {
  display:block;
}
<label><input type="checkbox" name="ChkBox[]" value="0">Some text goes here</label>
<label><input type="checkbox" name="ChkBox[]" value="1">Some text goes here</label>
<label><input type="checkbox" name="ChkBox[]" value="2">Some text goes here</label>
0
Munawir 13 may. 2016 a las 17:23

Uniéndome a @satJ con el comentario de @zzzzBov, haría:

<input type="checkbox" name="ChkBox[]" id="first" value="0"><label for="first"><span class="someClass">Some text goes here</span></label>
<input type="checkbox" name="ChkBox[]" id="second" value="0"><label for="second"><span class="someClass">Some text goes here</span></label>
<input type="checkbox" name="ChkBox[]" id="third" value="0"><label for="third"><span class="someClass">Some text goes here</span></label>
-1
JrBenito 13 may. 2016 a las 17:29

Puede usar el atributo for en los elementos <label> para indicar para qué casilla de verificación es la etiqueta. De esa manera, cuando un usuario haga clic en la etiqueta, la casilla de verificación alternará:

<input type="checkbox" name="ChkBox[]" id="first" value="0"><label for="first" class="someClass">Some text goes here</label>
<input type="checkbox" name="ChkBox[]" id="second" value="0"><label for="second" class="someClass">Some text goes here</label>
<input type="checkbox" name="ChkBox[]" id="third" value="0"><label for="third" class="someClass">Some text goes here</label>
2
satJ 13 may. 2016 a las 17:27