¿Cómo puedo hacer que una casilla de verificación alterne al hacer clic en la etiqueta de texto también?

votos
29

Checkboxesen HTMLformas no tienen etiquetas implícitas con ellos. Agregar una etiqueta explícita (texto) al lado no alternar el checkbox.

¿Cómo puedo hacer que una casilla de verificación alterne al hacer clic en la etiqueta de texto también?

Publicado el 05/08/2008 a las 12:51
fuente por usuario
En otros idiomas...                            


8 respuestas

votos
43

Si marcas correctamente tu código HTML, no hay necesidad de javascript. El siguiente código permitirá al usuario hacer clic en el texto de la etiqueta para marcar la casilla de verificación.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

El atributo for en el elemento label se vincula al atributo id en el elemento de entrada y el navegador hace el resto.

Esto ha estado probando para trabajar en:

  • IE6
  • IE7
  • Firefox
Respondida el 05/08/2008 a las 13:00
fuente por usuario

votos
17

Establezca la displaypropiedad de CSS para que la etiqueta sea un elemento de bloque y utilícela en lugar de su div, conserva el significado semántico de una etiqueta y permite el estilo que desee.

Por ejemplo:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Respondida el 05/08/2008 a las 13:52
fuente por usuario

votos
3

Como indica @Gatekiller y otros, la solución correcta es la etiqueta <etiqueta>.

Hacer clic en el texto es agradable, pero hay otra razón para usar la etiqueta <etiqueta>: accesibilidad. Las herramientas que las personas con discapacidades visuales usan para acceder a la web necesitan que las <etiquetas> lean el significado de las casillas de verificación y botones de opción. Sin <label> s, tienen que adivinar basándose en el texto que lo rodea, y a menudo se equivocan o tienen que darse por vencidos.

Es muy frustrante enfrentarse a un formulario que dice "Seleccione su método de envío, botón de radio1, botón de radio2, botón de radio3".

Tenga en cuenta que la accesibilidad web es un tema complejo; <label> s son un paso necesario, pero no son suficientes para garantizar el acceso o el cumplimiento de las reglamentaciones gubernamentales donde se aplique.

Respondida el 25/08/2008 a las 16:21
fuente por usuario

votos
2

Ronnie,

Si desea encerrar el texto de la etiqueta y la casilla de verificación dentro de un elemento contenedor, puede hacer lo siguiente:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Respondida el 05/08/2008 a las 13:28
fuente por usuario

votos
1

Puede envolver su casilla de verificación en la etiqueta:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Respondida el 05/08/2008 a las 13:25
fuente por usuario

votos
0

Es necesario que acaba de concluir la casilla de verificación en la etiqueta de la etiqueta al igual que este

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

VIOLÍN

o también puede utilizar la de atributo de la etiqueta y la identificación de la casilla de verificación, como a continuación

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

VIOLÍN

Respondida el 01/09/2015 a las 12:10
fuente por usuario

votos
-1

Esto debería funcionar:

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

si no funciona, me pleae corect!

Respondida el 09/03/2015 a las 12:13
fuente por usuario

votos
-2

Envolver con la etiqueta todavía no permite hacer clic en "en cualquier lugar de la caja", ¡solo en el texto! Esto hace el trabajo por mí:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

pero desafortunadamente tiene muchos javascript que se alternan de manera efectiva dos veces.

Respondida el 05/08/2008 a las 13:34
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more