基于单选按钮组中选择的值显示区域

解决方法示例：

HTML部分：

<div>
  <input type="radio" name="option" value="option1" id="option1">
  <label for="option1">选项1</label>
  <input type="radio" name="option" value="option2" id="option2">
  <label for="option2">选项2</label>
  <input type="radio" name="option" value="option3" id="option3">
  <label for="option3">选项3</label>
</div>
<div id="displayArea"></div>

JavaScript部分：

const option1 = document.getElementById("option1");
const option2 = document.getElementById("option2");
const option3 = document.getElementById("option3");
const displayArea = document.getElementById("displayArea");

option1.addEventListener("change", function() {
  if (option1.checked) {
    displayArea.textContent = "选项1被选中";
  }
});

option2.addEventListener("change", function() {
  if (option2.checked) {
    displayArea.textContent = "选项2被选中";
  }
});

option3.addEventListener("change", function() {
  if (option3.checked) {
    displayArea.textContent = "选项3被选中";
  }
});

上述代码中，我们首先在HTML中创建了三个单选按钮，每个按钮都有一个对应的label。然后在JavaScript中，我们获取了这三个单选按钮以及显示区域的元素，并为每个单选按钮添加了一个change事件监听器。当单选按钮的状态改变时，相应的事件处理函数会检查该单选按钮是否被选中，如果是，则修改显示区域的内容为相应的文本。