¿Cómo hago para que una casilla de verificación deje de hacer clic en la etiqueta de texto también?

Question

Checkboxes en HTML los formularios no tienen implícitos etiquetas con ellos.Agregar una etiqueta explícita (algo de texto) al lado no alterna la checkbox.

¿Cómo hago para que una casilla de verificación deje de hacer clic en la etiqueta de texto también?

Answer 1

Establecer el CSS display propiedad para que la etiqueta sea un elemento de bloque y utilícela en lugar de su div; mantiene 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 2

Si marca correctamente su código HTML, no es necesario utilizar 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 para atributo en el elemento de etiqueta enlaza con el identificación atributo en el elemento de entrada y el navegador hace el resto.

Esto ha sido probado para funcionar en:

• IE6
• IE7
• Firefox

Answer 3

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

Hacer clic en el texto es bueno, pero hay otra razón para usar la etiqueta <label>:accesibilidad.Las herramientas que utilizan las personas con discapacidad visual para acceder a la web necesitan <label> para leer el significado de las casillas de verificación y los botones de opción.Sin <label>, tienen que adivinar basándose en el texto circundante y, a menudo, se equivocan o tienen que darse por vencidos.

Es muy frustrante encontrarse frente 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;Las <label>s son un paso necesario pero no son suficientes para garantizar la accesibilidad o el cumplimiento de las regulaciones gubernamentales cuando corresponda.

Answer 4

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 5

Puede ajustar 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

Solo necesitas envolver la casilla de verificación en la etiqueta de esta manera

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

VIOLÍN

o también puedes usar el para atributo de etiqueta y identificación de su casilla de verificación como a continuación

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

VIOLÍN

Answer 7

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 es así, ¡corrígeme!

Answer 8

Envolver con la etiqueta aún no permite hacer clic en "en ningún lugar del cuadro", ¡aún solo en el texto!Esto hace el trabajo para 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 efectivamente alternan dos veces.