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

hipervinculos en html ejemplos

Question

Checkboxes de Checkboxes en formularios HTML no tienen etiquetas implícitas. Agregar una etiqueta explícita (texto) al lado no activa la checkbox .

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

Answer 1

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.

Answer 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.

Answer 3

Establezca la propiedad de display 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>

Answer 4

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, ¡pleae corect me!

Answer 5

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>

Answer 6

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>

Answer 7

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

Answer 8

Solo tiene que ajustar la casilla de verificación en la etiqueta de etiqueta como esta

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

FIDDLE

o también puedes usar el atributo para de etiqueta e id de tu casilla como abajo

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

FIDDLE