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

【问题标题】：Generating an array from selected radio buttons in Javascript?从Javascript中选定的单选按钮生成数组？
【发布时间】：2021-11-03 15:59:18
【问题描述】：

我正在动态生成一些单选按钮。最终结果如下所示：

<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

我需要从选定的单选按钮创建一个数组，如下所示：

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

我尝试了以下方法，但创建的数组不是我想要的：

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

这将创建一个像这样的数组：

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

如何实现我想要的数组？

【问题讨论】：

你说你想要的不是数组；它根本不是有效的 Javascript。
@ScottHunter，也许我应该提到这是一个更大的嵌套数组的一部分。
您的预期输出不是数组 - 它是一个对象。
这能回答你的问题吗？ Get a Radio Button Value Array with JS

标签： javascript html

【解决方案1】：

results 必须是一个对象才能支持任何键值对，否则您非常接近解决方案，请参阅：

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>

【讨论】：

【解决方案2】：

使用最新版本的 JavaScript 中的一些小魔法可以使它更加紧凑。逐行解释见代码中的cmets。

文档：

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

【讨论】：