Generating an array from selected radio buttons in Javascript?-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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:

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