Bootstrap PHP单选按钮选中值实时显示的实现需求

这问题很常见，要实现提交前实时回显单选按钮的选中值，咱们用JavaScript就能搞定，完全不需要后端参与，直接在前端处理就行。我给你整理了完整的实现方案：

1. 调整HTML结构 #

首先给你的单选按钮统一添加一个类名（比如grade-radio），方便JavaScript批量选中；同时新增一个回显区域，用来实时展示选中的值。修改后的表单代码大概是这样：

<form id="gradeForm" class="form-inline" method="POST" action="<?= $_SERVER['PHP_SELF']; ?>">
  <!-- 你的36个单选按钮，统一添加grade-radio类 -->
  <input type="radio" name="grade" value="选项1" class="grade-radio">
  <input type="radio" name="grade" value="选项2" class="grade-radio">
  <!-- ... 剩下的34个单选按钮 ... -->

  <!-- 新增实时回显区域 -->
  <div style="margin-top:10px;">
    当前选中值：<strong><span id="selectedValue">未选择</span></strong>
  </div>

  <button type="submit" style="margin-top:10px;">提交</button>
</form>

2. 添加JavaScript交互逻辑 #

这段代码会监听单选按钮的选中变化，实时更新回显区域的内容。你可以把它放在HTML的</body>标签之前，或者用DOMContentLoaded确保DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有单选按钮和回显元素
  const radioButtons = document.querySelectorAll('.grade-radio');
  const displaySpan = document.getElementById('selectedValue');

  // 给每个单选按钮绑定选中变化事件
  radioButtons.forEach(radio => {
    radio.addEventListener('change', function() {
      if (this.checked) {
        displaySpan.textContent = this.value;
      }
    });
  });

  // 页面初始化时，如果已有默认选中的单选按钮，同步显示其值
  const defaultChecked = document.querySelector('.grade-radio:checked');
  if (defaultChecked) {
    displaySpan.textContent = defaultChecked.value;
  }
});

特殊情况处理（多组单选按钮） #

如果你的36个单选按钮是分多组的（不同name属性），想要实时显示所有组的选中值，可以用这个版本：

document.addEventListener('DOMContentLoaded', function() {
  const radioButtons = document.querySelectorAll('.grade-radio');
  const displayDiv = document.getElementById('selectedValues');

  // 封装更新选中值的函数
  function updateSelectedValues() {
    const checkedRadios = document.querySelectorAll('.grade-radio:checked');
    const values = Array.from(checkedRadios).map(radio => radio.value).join(' | ');
    displayDiv.textContent = values || '未选择任何选项';
  }

  // 绑定事件
  radioButtons.forEach(radio => {
    radio.addEventListener('change', updateSelectedValues);
  });

  // 初始化显示
  updateSelectedValues();
});

对应的回显区域改成：

<div style="margin-top:10px;">
  当前选中的所有选项：<strong><span id="selectedValues">未选择任何选项</span></strong>
</div>

• 统一类名grade-radio是核心，让我们能批量选中所有单选按钮，避免重复代码
• DOMContentLoaded确保代码在页面元素加载完成后执行，不会出现找不到元素的错误
• 初始化检查默认选中项，避免页面刚加载时显示“未选择”但实际有默认选中的情况

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