Hola, soy nuevo en el desarrollo web y trabajo en proyectos simples y estoy atascado en un problema si alguien puede ayudar. Tengo 3 casillas de verificación que un usuario puede marcar sobre cuáles son sus cosas favoritas para hacer. Después de completar la pregunta, estoy tratando de registrar el valor de las casillas elegidas; sin embargo, obtengo resultados no identificados. Si alguien puede ayudar, se lo agradezco. Este es el código: html:
What is your favorite thing to do: <p id = "favoriteThings"> <input type="checkbox" name="TV" value=1>Watch TV <input type="checkbox" name="Books" value=2>Read Books <input type="checkbox" name="work" value=3>Work </p>JS:
var favoriteThings = document.getElementById("favoriteThings"); console.log("favorite things: " + favoriteThings.value);Supongo que el problema es que la etiqueta del párrafo es la identificación, pero ¿alguien puede darme una solución? Como no quiero darle a cada casilla de verificación la misma ID, ya que escuché que es una mala práctica. gracias de antemano.
name para su grupo de entradasvalue diferente"[]""input" en su caso: const ELs_favorite = document.querySelectorAll("[name=favorite]"); const get_favorite = () => { const checked_values = [...ELs_favorite].reduce((arr, EL) => { if (EL.checked) arr.push(EL.value); return arr; }, []); console.log(checked_values); }; ELs_favorite.forEach(EL => { EL.addEventListener("input", get_favorite); }); What is your favorite thing to do: <p> <label><input type="checkbox" name="favorite" value="tv">Watch TV</label> <label><input type="checkbox" name="favorite" value="books">Read Books</label> <label><input type="checkbox" name="favorite" value="work">Work</label> </p> En el ejemplo anterior, Array.reduce() se usa para recopilar solo los value de los checked de entrada marcados en un Array.
puede dar a cada casilla de verificación la misma identificación (no hay problema).
Solución:
<p id = "favoriteThings"> <input type="checkbox" name="favoriteThings" value="TV" or "1" onclick="MyNameFunction()">Watch TV <input type="checkbox" name="favoriteThings" value="Read Books" or "2" onclick="MyNameFunction()">Read Books <input type="checkbox" name="favoriteThings" value="Work" or "3" onclick="MyNameFunction()">Work </p>js
var choices = []; var els = document.getElementsByName('favoriteThings'); console.log("Favourite things: "); for (var i=0;i<els.length;i++){ if ( els[i].checked ) { console.log(els[i].value); }