所以我想要做的是創建一個單選按鈕，比如 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]。有沒有一種簡單的方法可以做到這一點？太感謝了
uj5u.com熱心網友回復：
- 向表單提交添加一個事件監聽器
- 將 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>uj5u.com熱心網友回復：
向按下按鈕時執行的表單添加了一個 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381877.html