如何将选定的单选按钮选项推送到javascript中的数组

要将选定的单选按钮选项推送到JavaScript中的数组，可以按照以下步骤进行操作：

基础概念

单选按钮（Radio Button）：一组单选按钮中只能有一个选项被选中。
JavaScript数组：用于存储多个值的集合。

类型

一维数组：简单的线性数据结构。
多维数组：嵌套数组，用于表示更复杂的数据结构。

应用场景

表单处理：收集用户选择的多个选项。
数据存储：临时存储需要进一步处理的数据。

实现步骤

HTML结构：创建一组单选按钮。
JavaScript逻辑：编写脚本来监听单选按钮的变化，并将选中的值推送到数组中。

示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button to Array</title>
</head>
<body>
    <form id="myForm">
        <input type="radio" name="option" value="Option1"> Option 1<br>
        <input type="radio" name="option" value="Option2"> Option 2<br>
        <input type="radio" name="option" value="Option3"> Option 3<br>
        <button type="button" onclick="addSelectedOption()">Add Selected Option</button>
    </form>
    <p>Selected Options: <span id="selectedOptions"></span></p>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

let selectedOptions = [];

function addSelectedOption() {
    const form = document.getElementById('myForm');
    const options = form.elements['option'];
    let selectedValue = null;

    for (let i = 0; i < options.length; i++) {
        if (options[i].checked) {
            selectedValue = options[i].value;
            break;
        }
    }

    if (selectedValue !== null) {
        selectedOptions.push(selectedValue);
        updateDisplay();
    } else {
        alert('Please select an option.');
    }
}

function updateDisplay() {
    const displayElement = document.getElementById('selectedOptions');
    displayElement.textContent = selectedOptions.join(', ');
}