JavaScript创建单选按钮和标签

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

<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>

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

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

console.log(selectedValue);