从 Javascript 中选定的单选按钮生成数组？

Question

I'm generating some radio buttons dynamically. The end result looks like this:

<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

I need to create an Array from the selected radio buttons that looks like this:

"someName": {
        "1": "1",
        "2": "0"
    }

I tried the following but the created array is not what I want:

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);
});

This will create an array like this:

[
  "1",
  "2",
  "3"
]

How can I achieve the array I want?

Answer 1

results needs to be an object in order to support any key-value pairs, otherwise you were VERY close to a solution, see this:

 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>

Answer 2

Using a little magic from more recent versions of JavaScript can make this a bit more compact. See comments in the code for line-by-line explanation.

Documentation:

• Object.fromEntries
• Array.from
• document.querySelectorAll
• map
• filter

 // 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>