Las casillas de verificación se utilizan para instancias en las que un usuario puede desear seleccionar múltiples opciones, como en el caso de una pregunta de «marque todo lo que corresponda», en los formularios. Casillas de verificación HTML seleccionadas. Un elemento de casilla de verificación se puede colocar en una página web de forma preverificada configurando el atributo marcado con un valor «sí».
- Típicamente en forma de cuadrado.
- Permitir al usuario seleccionar opciones con un solo clic.
- Las opciones comparten un solo nombre.
- La casilla de verificación le permite seleccionar más de una opción por grupo
- Código HTML: documento HTML mediante el empleo de la etiqueta HTML dedicada que envuelve el código JavaScript. La etiqueta se puede colocar en la sección de su HTML, en la sección o después de la etiqueta de cierre, según cuándo desee que se cargue el JavaScript.
- Código HTML: documento HTML mediante el empleo de la etiqueta HTML dedicada que envuelve el código JavaScript. La etiqueta se puede colocar en la sección de su HTML, en la sección o después de la etiqueta de cierre, según cuándo desee que se cargue el JavaScript.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <form> <fieldset> <legend> <bold>Checkbox</bold> </legend> <div class="form-group"> <label for="yesgraduated"> Are you graduated? </label> <input id="yesgraduated" name="yesgraduated" type="checkbox" value="yes" onchange="graduatedFunction()" /> <br /> </div> <div id="graduated" class="form-group"> <label for="degreename"> Degree Name: </label> <input type="text" class="form-control" name="degreename" id="degreename" /> <br /> </div> <button type="button" class="btn btn-primary" value="Verify"> Submit </button> </fieldset> </form> </div> <div class="col-md-3"></div> </div> </div> </body> </html>
- Código JavaScript: Ahora, en el código javaScript estamos tratando de dar la opción de incluir el título en el formulario. El usuario debe informar si es graduado o no. Entonces, cuando hacemos clic en esta casilla de verificación, se abre un nuevo campo de entrada. Entonces, si alguien hace clic o no lo hace, la función «función graduada» mostrará la parte oculta o no mostrará ninguna.
javascript
<script>
function graduatedFunction() {
if (document.getElementById("yesgraduated")
.checked)
{
document.getElementById("graduated")
.style.display = "inline";
document.getElementById("degreename")
.setAttribute("required", true);
} else {
document.getElementById("degreename")
.removeAttribute("required");
document.getElementById("graduated")
.style.display = "none";
}
}
</script>
Publicación traducida automáticamente
Artículo escrito por nehaahlawat y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA