Ir al contenido principal

Obtener datos de botones de checkbox

En esta práctica de JavaScript he puesto en práctica el acceso a los datos de botones checkbox de un formulario en HTML.

Logotipo de JavaScript

El usuario seleccionará sus hobbies favoritos de entre unas opciones y al pulsar sobre un botón se le mostrará los hobbies que ha seleccionado.
Para poder comprender el código de esta práctica es muy importante conocer el uso de las propiedades checked y value en los botones de checkbox de un formulario en HTML. Como ayuda puedes echarle un vistazo a los siguientes enlaces:

👉Enlace 1      👉Enlace 2

Código HTML

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Práctica de JavaScript</title>
    <link href="estilos.css" rel="stylesheet" type="text/css" />
    <script src="funciones.js" type="text/javascript"></script>
  </head>
  <body>
    <form name="hobbies">
        <h2>Hobbies favoritos</h2>
        <div id="hobbies">
            <p><label><input type="checkbox" name="futbol" value="Fútbol">Fútbol</label></p>
            <p><label><input type="checkbox" name="tenis" value="Tenis">Tenis</label></p>
            <p><label><input type="checkbox" name="baloncesto" value="Baloncesto">Baloncesto</label></p>
            <p><label><input type="checkbox" name="voleibol" value="Voleibol">Voleibol</label></p>
            <p><label><input type="checkbox" name="ciclismo" value="Ciclismo">Ciclismo</label></p>
        </div>
        <p><input type="button" id="boton" value="Ver hobbies"></p>
    </form>
    <div id="caja"></div>
  </body>
</html>

Código CSS

* {
  text-align: center;
}
#hobbies {
  width: 400px;
  margin: 0px auto;
}
#hobbies p {
  text-align: left;
}

Código JavaScript

window.onload = inicializar;
function inicializar() {
    document.getElementById("boton").addEventListener("click", info, false);
}
function info() {
    let caja = document.getElementById("caja");
    let futbol, tenis, baloncesto, voleibol, ciclismo;
    caja.innerHTML = "<h3>Sus hobbies favoritos son:</h3>";
    if(document.hobbies.futbol.checked == true) {
        futbol = "<h4>" + document.hobbies.futbol.value + "</h4>";
    }else{
        futbol = "";
    }
    if(document.hobbies.tenis.checked == true) {
        tenis = "<h4>" + document.hobbies.tenis.value; + "</h4>";
    }else{
        tenis = "";
    }
    if(document.hobbies.baloncesto.checked == true) {
        baloncesto = "<h4>" + document.hobbies.baloncesto.value; + "</h4>";
    }else{
        baloncesto = "";
    }
    if(document.hobbies.voleibol.checked == true) {
        voleibol = "<h4>" + document.hobbies.voleibol.value; + "</h4>";
    }else{
        voleibol = "";
    }
    if(document.hobbies.ciclismo.checked == true) {
        ciclismo = "<h4>" + document.hobbies.ciclismo.value; + "</h4>";
    }else{
        ciclismo = "";
    }
    caja.innerHTML += futbol + tenis + baloncesto + voleibol + ciclismo;
}

Demostración

Licencia de Creative Commons
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.

Etiquetas:

Entradas populares de este blog

Mostrar y ocultar un elemento con un solo botón

En esta práctica de JavaScript he puesto en práctica el uso de funciones dentro de otra función. Cuando se pulsa en un botón se oculta el elemento y se cambia el valor del botón. Cuando se pulsa nuevamente en el botón se muestra el elemento y se cambia el valor del botón. Para poder comprender el código de esta práctica es muy importante conocer el uso de las funciones en JavaScript y la forma de acceder a los elementos del DOM y a los atributos de dichos elementos . Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1      👉 Enlace 2 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> ...
Leer más

Tabla de multiplicar con JavaScript

En esta práctica de JavaScript he puesto en práctica el uso del bucle for y de la propiedad innerHTML en este lenguuaje de programación. El usuario ingresa un número y se le muestra la tabla de multiplicar de dicho número. Para poder comprender el código de esta práctica es muy importante conocer el uso del bucle for() , de la propiedad innerHTML y la forma de acceder a los elementos del DOM y a los atributos de dichos elementos . Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1      👉 Enlace 2      👉 Enlace 3 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <li...
Leer más