Estoy generando algunos botones de radio dinámicamente. El resultado final se ve así:
<div>Question 1:</div> <input type="radio" name="1" value="1">Yes <input type="radio" name="1" value="0">No <div>Question 2:</div> <input type="radio" name="2" value="1">Yes <input type="radio" name="2" value="0">No <div>Question 3:</div> <input type="radio" name="3" value="1">Yes <input type="radio" name="3" value="0">NoNecesito crear una matriz a partir de los botones de opción seleccionados que se vea así:
"someName": { "1": "1", "2": "0" }Intenté lo siguiente, pero la matriz creada no es lo que quiero:
let names = ["1","2","3"] let results = []; document.querySelector("button").addEventListener("click", function(event){ results = names.map(function(el){ return document.querySelector("input[name='" + el + "']:checked").value; }); console.log(results); });Esto creará una matriz como esta:
[ "1", "2", "3" ]¿Cómo puedo lograr la matriz que quiero?
results deben ser un objeto para admitir cualquier par clave-valor; de lo contrario, estuvo MUY cerca de una solución, vea esto:
let names = ["1","2","3"] let results = {}; document.querySelector("button").addEventListener("click", function(event){ /*results = names.map(function(el){ return document.querySelector("input[name='" + el + "']:checked").value; });*/ results = {}; for (let name of names) { let item = document.querySelector("input[name='" + name + "']:checked"); if (item) { //Something was checked results[name] = item.value; } } console.log(results); }); <div>Question 1:</div> <input type="radio" name="1" value="1">Yes <input type="radio" name="1" value="0">No <div>Question 2:</div> <input type="radio" name="2" value="1">Yes <input type="radio" name="2" value="0">No <div>Question 3:</div> <input type="radio" name="3" value="1">Yes <input type="radio" name="3" value="0">No <button type="button">DO IT!</button>Usar un poco de magia de las versiones más recientes de JavaScript puede hacer que esto sea un poco más compacto. Consulte los comentarios en el código para obtener una explicación línea por línea.
Documentación:
// querySelector gets the first item that matches the selector document.querySelector('#check').addEventListener('click', function (e) { console.log( // Object.fromEntries takes an array like [[name1, value1],[name2, value2]] and turns // it into { name1: value1, name2: value2 } Object.fromEntries( // Give it an array of all of the radio buttons Array.from(document.querySelectorAll('input[type="radio"]')) // map that to an array of the name, value, and whether it is checked or not .map(el => ([el.name, el.value, el.checked])) // filter out the checked ones .filter(([name, value, checked]) => checked) // map to an array of name/value pairs for Object.fromEntries .map(([name, value, checked]) => ([name, value])) ) ); }); <div>Question 1:</div> <label><input type="radio" name="1" value="1">Yes</label> <label><input type="radio" name="1" value="0">No</label> <div>Question 2:</div> <label><input type="radio" name="2" value="1">Yes</label> <label><input type="radio" name="2" value="0">No</label> <div>Question 3:</div> <label><input type="radio" name="3" value="1">Yes</label> <label><input type="radio" name="3" value="0">No</label> <div> <button type="button" id="check">Go</button> </div>