JavaScript创建单选按钮和标签

的过程如下：

首先，创建一个包含单选按钮的 HTML 元素。可以使用 <input> 标签，设置 type 属性为 "radio" 表示创建单选按钮。

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

在上面的例子中，我们创建了两个单选按钮，它们都有相同的 name 属性值，用于表示它们是一组单选按钮。

使用 JavaScript 可以动态地创建标签并将其添加到 HTML 页面中。以下是使用 JavaScript 创建单选按钮的示例：

<div id="radio-buttons">
  <label for="male">Male</label>
  <input type="radio" id="male" name="gender" value="male">

  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female">
</div>

<script>
  // 获取要添加单选按钮的容器元素
  const radioButtonsContainer = document.getElementById("radio-buttons");

  // 创建新的单选按钮和标签
  const newRadioButton1 = document.createElement("input");
  newRadioButton1.type = "radio";
  newRadioButton1.name = "gender";
  newRadioButton1.value = "other";

  const newLabel1 = document.createElement("label");
  newLabel1.textContent = "Other";
  newLabel1.setAttribute("for", "other");

  // 将新创建的单选按钮和标签添加到容器元素中
  radioButtonsContainer.appendChild(newLabel1);
  radioButtonsContainer.appendChild(newRadioButton1);
</script>

在上述示例中，我们首先获取具有 id="radio-buttons" 的容器元素。然后，使用 createElement 方法创建一个新的单选按钮和标签。设置它们的属性和内容后，使用 appendChild 方法将它们添加到容器元素中。

可以通过 JavaScript 获取所选单选按钮的值。以下是一个示例：

// 获取单选按钮组的所有单选按钮
const radioButtons = document.getElementsByName("gender");

// 遍历所有单选按钮，找出被选中的单选按钮
let selectedValue;
for (const radioButton of radioButtons) {
  if (radioButton.checked) {
    selectedValue = radioButton.value;
    break;
  }
}

console.log(selectedValue);

在上面的代码中，我们使用 getElementsByName 方法获取拥有相同 name 属性的所有单选按钮。然后，使用 for...of 循环遍历这些单选按钮，找出被选中的单选按钮。最后，通过读取 value 属性获取所选单选按钮的值。

JavaScript创建单选按钮和标签的相关知识点：