如何在每个按钮专用于一个数组值的情况下使用单选按钮？答案

【问题标题】：How can I use radio button where each button is dedicated to one array value?如何在每个按钮专用于一个数组值的情况下使用单选按钮？
【发布时间】：2022-01-17 19:05:07
【问题描述】：

所以我想做的是创建一个单选按钮，比如 5 个选项。因为它是一个单选按钮，显然只能选择一个选项。我希望这个数组按钮将五个值插入一个数组，其中选定的值为 1，其他值为 0。

假设我有五个选项：A、B、C、D、E

<form method="POST">
  <input type="radio" id="html" name="fav_language" value="1">A<br>
  <input type="radio" id="html" name="fav_language" value="1">B<br>
  <input type="radio" id="html" name="fav_language" value="1">C<br>
  <input type="radio" id="html" name="fav_language" value="1">D<br>
  <input type="radio" id="html" name="fav_language" value="1">E<br>
<button type="submit" value="Submit">Submit</button>
</form>

如果选择选项 B，如何将其放入数组中，使其等于 [0,1,0,0,0]。有没有一种简单的方法可以做到这一点？非常感谢

【问题讨论】：

标签： html arrays button radio-button radio

【解决方案1】：

为表单添加了一个 onSubmit 函数，该函数在按下按钮时执行。然后该函数根据用户选择的选项分配数组中的值。

let arr = [];
const createArray = (e) => {
  radios = document.getElementsByName("fav_language");
  for (var i = 0, length = radios.length; i < length; i++) {
    arr[i] = +radios[i].checked;
  }
  console.log(arr);
}

<form method="POST" onsubmit="createArray()">
  <input type="radio" id="html" name="fav_language" value="1">A<br>
  <input type="radio" id="html" name="fav_language" value="1">B<br>
  <input type="radio" id="html" name="fav_language" value="1">C<br>
  <input type="radio" id="html" name="fav_language" value="1">D<br>
  <input type="radio" id="html" name="fav_language" value="1">E<br>
  <button type="submit" value="Submit">Submit</button>
</form>

【讨论】：

如果使用 const 和 let，为什么不在 for 循环中使用 let？
啊，你把你的 if 改成了我的一元加版本 :) 也比三元简单，比你的 if 好很多
我不推荐内联onsubmit。
如果你想用内联的onsubmit停止提交，你需要在函数中使用onsubmit="return createArray()"并返回false
哦，我不知道。非常感谢。

【解决方案2】：

在表单提交中添加一个事件监听器
将 querySelectorAll 转换为数组并映射所检查属性的真实性

document.getElementById("myForm").addEventListener("submit", function(e) {
  e.preventDefault(); // remove if you want the form to submit
  const arr = [...document.querySelectorAll("[name=fav_language]")]
    .map(rad => +rad.checked);
  console.log(arr)
})

<form method="POST" id="myForm">
  <input type="radio" id="html" name="fav_language" value="1">A<br>
  <input type="radio" id="html" name="fav_language" value="1">B<br>
  <input type="radio" id="html" name="fav_language" value="1">C<br>
  <input type="radio" id="html" name="fav_language" value="1">D<br>
  <input type="radio" id="html" name="fav_language" value="1">E<br>
  <button type="submit" value="Submit">Submit</button>
</form>

【讨论】：