单选按钮选中后执行JavaScript：解决代码提前触发问题

哈哈，我懂你遇到的问题了——你现在的代码是页面一加载就直接跑起来了，这时候用户还没来得及点单选按钮呢，当然没法获取到用户的选择啦！要让代码等用户操作后再执行，我们需要把逻辑绑定到用户交互事件上，给你两种常用的解决方案：

方案1：单选按钮切换时自动触发 #

给单选按钮绑定change事件，用户切换选项的瞬间就执行对应逻辑：

完整代码示例 #

<!-- 补全你的单选按钮HTML（假设原代码未写完） -->
<input id="radio_myself" name="radMyself" type="radio" value="我自己">
<label for="radio_myself">我自己</label>

<input id="radio_selse" name="radMyself" type="radio" value="其他人">
<label for="radio_selse">其他人</label>

<script>
// 获取两个单选按钮元素
const myselfRadio = document.getElementById("radio_myself");
const selseRadio = document.getElementById("radio_selse");

// 定义要执行的逻辑函数
function showSelectedValue() {
  if (myselfRadio.checked) {
    alert(myselfRadio.value);
  } else if (selseRadio.checked) {
    alert(selseRadio.value);
  }
}

// 给两个单选按钮绑定change事件
myselfRadio.addEventListener('change', showSelectedValue);
selseRadio.addEventListener('change', showSelectedValue);
</script>

方案2：点击按钮后再触发（更可控） #

如果不想切换选项就弹窗，而是让用户选完后主动确认，那可以加个按钮，点击按钮时再执行逻辑：

完整代码示例 #

<input id="radio_myself" name="radMyself" type="radio" value="我自己">
<label for="radio_myself">我自己</label>

<input id="radio_selse" name="radMyself" type="radio" value="其他人">
<label for="radio_selse">其他人</label>

<!-- 新增一个确认按钮 -->
<button id="confirmBtn">确认选择</button>

<script>
// 获取按钮元素
const confirmBtn = document.getElementById("confirmBtn");

// 绑定按钮的点击事件
confirmBtn.addEventListener('click', function() {
  const myselfRadio = document.getElementById("radio_myself");
  const selseRadio = document.getElementById("radio_selse");
  
  if (myselfRadio.checked) {
    alert(myselfRadio.value);
  } else if (selseRadio.checked) {
    alert(selseRadio.value);
  } else {
    alert("请先选择一个选项哦～");
  }
});
</script>

核心思路就是：不要让代码直接在全局环境下执行，而是把逻辑放进事件处理函数里，等用户触发对应的交互（切换单选、点击按钮）时再执行。

内容的提问来源于stack exchange，提问作者user9489641