Checkboxes en HTML formas no tienen etiquetas implícitas con ellas. Agregar una etiqueta explícita (texto) al lado no alternar el checkbox.¿Cómo hago para que una casilla de verificación también deje de hacer clic en la etiqueta de texto?
¿Cómo hago para que una casilla de verificación deje de hacer clic en la etiqueta de texto también?
Establezca la propiedad CSS display 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>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 de atributo en los enlaces de elementos etiqueta al Identificación del atributo en el elemento de entrada y el navegador hace el resto.
Esto ha estado probando para trabajar en:
No es útil si está creando varias filas que tienen casillas de verificación porque debería dar a cada una el mismo nombre e id como se muestra aquí. – AndroidDev
Usted 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>
Ronnie ,
Si quería encerrar el texto de la etiqueta y la casilla de verificación dentro de un elemento contenedor, se puede hacer lo siguiente:
<label for="surname">
Surname
<input type="checkbox" name="surname" id="surname" />
</label>
de envolver con la etiqueta todavía no permite hacer clic en 'cualquier parte del cuadro' - siendo sólo 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 un montón de JavaScript que se alternar con eficacia dos veces.
Como se indica por @Gatekiller y otros, la solución correcta es la <etiqueta> etiqueta.
Hacer clic en el texto es bueno, pero hay otra razón para usar la etiqueta <etiqueta>: accesibilidad. Las herramientas que las personas con discapacidades visuales utilizan para acceder a la web necesitan la etiqueta < > para leer el significado de las casillas de verificación y botones de opción. Sin <etiqueta> s, tienen que adivinar en función del 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; <etiqueta> s son un paso necesario, pero no son suficientes para garantizar la accesibilidad o el cumplimiento de las reglamentaciones gubernamentales donde se aplique.
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!
Mejora: 'box.checked =! Check;'. Evita la repetición, aunque la legibilidad está un poco comprometida. –
Tienes 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>
o también puede utilizar el para atributo de la etiqueta y Identificación de la casilla de verificación, como a continuación
<label for="other">Other Details</label>
<input type="checkbox" id="other" />
¿Puedes editar la pregunta original? Actualmente, la respuesta mejor calificada ES la mejor para la pregunta, tal como está redactada. La respuesta aceptada en realidad responde a una actualización de la pregunta y modifiqué apropiadamente (se invertirá después de la edición). –