带有单选按钮的动态输入字段

介绍

在开发 Web 应用程序时，输入字段是必不可少的组件之一。动态输入字段允许用户从一组选项中选择一个值。它们具有单选按钮，使用户只能选择一个选项。

实现

在 HTML 中，可以通过 input 标签来实现单选按钮。

<label>
  <input type="radio" name="myOption" value="option1">
  Option 1
</label>
<label>
  <input type="radio" name="myOption" value="option2">
  Option 2
</label>
<label>
  <input type="radio" name="myOption" value="option3">
  Option 3
</label>

上面的代码创建了三个单选按钮和标签，每个按钮都具有相同的名称 myOption，因此只能选择一个选项。在选择选项时，所选选项的值将在提交表单时发送到服务器。

要在表单中使用动态输入字段，可以使用 JavaScript 为 input 标签动态添加选项。

const options = ["Option 1", "Option 2", "Option 3"];

const inputContainer = document.getElementById("input-container");
for (let i = 0; i < options.length; i++) {
    const label = document.createElement("label");
    const radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "myOption";
    radio.value = i + 1;
    label.textContent = options[i];
    label.insertBefore(radio, label.firstChild);
    inputContainer.appendChild(label);
}

上面的代码创建了一个包含三个选项的数组，并将其添加到具有 ID input-container 的 HTML 元素中。然后，使用循环动态添加 input 标签和标签，每个选项都具有单选按钮，使用户只能选择一个选项。

总结

带有单选按钮的动态输入字段是一种实用的输入组件，使用户从一组选项中选择一个值。在 HTML 中，可以使用 input 标签来创建单选按钮。使用 JavaScript，可以动态添加选项。