Vanilla JavaScript -获取单选按钮的值并在DOM中显示该值

基础概念

在JavaScript中，单选按钮（Radio Button）通常用于在一组选项中选择一个。每个单选按钮都属于同一组，通过相同的name属性来标识。获取单选按钮的值通常涉及到遍历这些按钮并检查哪个被选中。

类型与应用场景

类型：单选按钮可以是<input type="radio">元素。
应用场景：适用于需要用户从多个互斥选项中选择一个的场景，如性别选择、选项设置等。

示例代码

以下是一个简单的示例，展示如何使用Vanilla JavaScript获取单选按钮的值并在DOM中显示该值：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radio Button Example</title>
</head>
<body>

<form id="myForm">
  <input type="radio" name="choice" value="Option 1"> Option 1<br>
  <input type="radio" name="choice" value="Option 2"> Option 2<br>
  <input type="radio" name="choice" value="Option 3"> Option 3<br>
  <button type="button" onclick="displayValue()">Display Selected Value</button>
</form>

<div id="result"></div>

<script>
function displayValue() {
  // 获取所有名为"choice"的单选按钮
  var radios = document.getElementsByName('choice');
  var selectedValue;

  // 遍历单选按钮，找到被选中的那个
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      selectedValue = radios[i].value;
      break;
    }
  }

  // 在DOM中显示选中的值
  document.getElementById('result').innerText = "Selected Value: " + selectedValue;
}
</script>

</body>
</html>