如何在每個按鈕專用於一個數組值的情況下使用單選按鈕？

Question

所以我想做的是創建一個單選按鈕，比如 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>

如果 select 選項 B，我怎樣才能把它放在一個數組中，使它等於 [0,1,0,0,0]。 有沒有一種簡單的方法可以做到這一點？ 太感謝了

Answer 1

1. 向表單提交添加一個事件監聽器
2. 將 querySelectorAll 轉換為數組和 map 檢查屬性的真實性

 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>

Answer 2

在按下按鈕時執行的表單中添加了 onSubmit function。 function 然后根據用戶選擇的選項分配數組中的值。

 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>