如何从多组单选按钮收集选项并传递指定值（jQuery/原生JS/PHP）

问题核心 #

根据两组单选按钮的选中组合，输出对应预设文本到指定字段（如div、input）。你的原代码存在以下问题：

• 表单按钮是type="button"，不会触发表单提交，PHP无法获取参数
• 缺少前端实时响应逻辑，用户选完选项后没有即时反馈
• 没有指定结果输出的目标容器

下面提供三种可行方案：

方案1：原生JavaScript（实时更新） #

无需提交表单，用户切换单选按钮时立刻更新结果，体验更流畅。

完整代码示例 #

<!-- 添加结果展示容器 -->
<div id="resultField" style="margin-top:20px;padding:10px;border:1px solid #eee;"></div>

<form class="choices">
  <div class="card first-card d-none d-lg-block">
    <div class="card-header">
      <div class="btn-link">
        Question 1
      </div>
    </div>
    <fieldset id="levels" class="btn-group btn-group-toggle">
      <label class="btn btn-sm btn-outline-info">
        <input type="radio" name="levelRadio" value="A1" checked> A1
      </label>
      <label class="btn btn-sm btn-outline-info">
        <input type="radio" name="levelRadio" value="A2"> A2
      </label>
    </fieldset>
  </div>

  <div class="card">
    <div class="card-header" id="headingOne">
      <div class="btn-link">
        Question 2
      </div>
    </div>
    <div class="card-body">
      <fieldset id="shapes">
        <label>
          <input type="radio" name="shapeRadio" value="B1" checked>
          B1
        </label>
        <label>
          <input type="radio" name="shapeRadio" value="B2">
          B2
        </label>
        <label>
          <input type="radio" name="shapeRadio" value="B3">
          B3
        </label>
      </fieldset>
    </div>
  </div>
</form>

<script>
// 定义组合与结果的映射表，方便后续扩展
const comboMap = {
  "A1-B1": "R1aR2b",
  "A1-B2": "R1aR2c",
  "A1-B3": "R1aR2d",
  "A2-B1": "R1bR2b",
  "A2-B2": "R1bR2c",
  "A2-B3": "R1bR2d"
  // 可继续添加更多组合
};

// 获取元素
const resultField = document.getElementById('resultField');

// 定义更新结果的函数
function updateResult() {
  // 获取选中的值
  const selectedLevel = document.querySelector('input[name="levelRadio"]:checked').value;
  const selectedShape = document.querySelector('input[name="shapeRadio"]:checked').value;
  
  // 生成组合键，查表获取结果
  const comboKey = `${selectedLevel}-${selectedShape}`;
  const resultText = comboMap[comboKey] || "无匹配组合";
  
  // 更新到目标字段
  resultField.textContent = resultText;
}

// 给所有单选按钮绑定change事件
document.querySelectorAll('input[name="levelRadio"], input[name="shapeRadio"]')
  .forEach(radio => radio.addEventListener('change', updateResult));

// 页面加载时初始化结果
updateResult();
</script>

方案2：jQuery实现（简洁版） #

用jQuery简化DOM操作，逻辑和原生JS一致。

完整代码示例 #

<div id="resultField" style="margin-top:20px;padding:10px;border:1px solid #eee;"></div>

<form class="choices">
  <!-- 表单结构与方案1一致，省略重复代码 -->
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const comboMap = {
  "A1-B1": "R1aR2b",
  "A1-B2": "R1aR2c",
  "A1-B3": "R1aR2d",
  "A2-B1": "R1bR2b",
  "A2-B2": "R1bR2c",
  "A2-B3": "R1bR2d"
};

function updateResult() {
  const selectedLevel = $('input[name="levelRadio"]:checked').val();
  const selectedShape = $('input[name="shapeRadio"]:checked').val();
  const comboKey = `${selectedLevel}-${selectedShape}`;
  $('#resultField').text(comboMap[comboKey] || "无匹配组合");
}

// 绑定事件
$('input[name="levelRadio"], input[name="shapeRadio"]').on('change', updateResult);

// 初始化
updateResult();
</script>

方案3：PHP后端处理（表单提交后） #

如果需要后端处理数据，修改表单提交逻辑，PHP接收参数后输出结果。

完整代码示例 #

<?php
// 先判断参数是否存在，避免未定义错误
$level = $_GET["levelRadio"] ?? '';
$shape = $_GET["shapeRadio"] ?? '';
$resultText = '';

if ($level && $shape) {
    $comboMap = [
        "A1-B1" => "R1aR2b",
        "A1-B2" => "R1aR2c",
        "A1-B3" => "R1aR2d",
        "A2-B1" => "R1bR2b",
        "A2-B2" => "R1bR2c",
        "A2-B3" => "R1bR2d"
    ];
    $comboKey = "$level-$shape";
    $resultText = $comboMap[$comboKey] ?? "无匹配组合";
}
?>

<!-- 结果展示区域 -->
<div id="resultField" style="margin-top:20px;padding:10px;border:1px solid #eee;"><?php echo $resultText; ?></div>

<!-- 修改表单：添加method，按钮改为submit -->
<form class="choices" method="get">
  <div class="card first-card d-none d-lg-block">
    <div class="card-header">
      <div class="btn-link">
        Question 1
      </div>
    </div>
    <fieldset id="levels" class="btn-group btn-group-toggle">
      <label class="btn btn-sm btn-outline-info">
        <input type="radio" name="levelRadio" value="A1" <?php echo $level === 'A1' ? 'checked' : ''; ?>> A1
      </label>
      <label class="btn btn-sm btn-outline-info">
        <input type="radio" name="levelRadio" value="A2" <?php echo $level === 'A2' ? 'checked' : ''; ?>> A2
      </label>
    </fieldset>
  </div>

  <div class="card">
    <div class="card-header" id="headingOne">
      <div class="btn-link">
        Question 2
      </div>
    </div>
    <div class="card-body">
      <fieldset id="shapes">
        <label>
          <input type="radio" name="shapeRadio" value="B1" <?php echo $shape === 'B1' ? 'checked' : ''; ?>>
          B1
        </label>
        <label>
          <input type="radio" name="shapeRadio" value="B2" <?php echo $shape === 'B2' ? 'checked' : ''; ?>>
          B2
        </label>
        <label>
          <input type="radio" name="shapeRadio" value="B3" <?php echo $shape === 'B3' ? 'checked' : ''; ?>>
          B3
        </label>
      </fieldset>
    </div>
  </div>
  <!-- 按钮改为submit，移除disabled -->
  <button id="btn_confirm_data" type="submit" class="btn btn-primary btn-block">Submit</button>
</form>

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