选中单选按钮时尝试更改文本(标题)

选中单选按钮时尝试更改文本(标题)是指在前端开发中，当用户选择了一个单选按钮时，通过相应的事件触发，尝试更改页面中的文本或标题内容。

这个功能在很多网页应用中都会用到，例如问卷调查、表单填写、选项选择等场景。当用户选择了一个单选按钮时，页面上的文本或标题可能需要根据用户的选择进行相应的变化，以提供更好的用户体验。

实现这个功能可以通过以下步骤：

在HTML中定义单选按钮组，并为每个单选按钮设置相应的value值，用于标识不同的选项。

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

使用JavaScript监听单选按钮的change事件，当用户选择了一个选项时触发相应的函数。

var radioButtons = document.getElementsByName("option");
for (var i = 0; i < radioButtons.length; i++) {
  radioButtons[i].addEventListener("change", changeText);
}

function changeText() {
  var selectedOption = document.querySelector('input[name="option"]:checked').value;
  var title = document.getElementById("title");
  
  // 根据选项的值进行相应的文本或标题更改
  if (selectedOption === "option1") {
    title.innerHTML = "Option 1 Selected";
  } else if (selectedOption === "option2") {
    title.innerHTML = "Option 2 Selected";
  } else if (selectedOption === "option3") {
    title.innerHTML = "Option 3 Selected";
  }
}