如何在POST请求中获取btn-group-toggle的有效值？当前仅获固定值'on'

嘿，我知道你现在卡在这儿了——每次提交POST请求，btn-group-toggle的结果都是固定的'on'，点不同按钮也没变化，对吧？这事儿其实是因为你没给单选框设置正确的value属性，再加上可能按钮和单选框的绑定没做好，咱们一步步来解决：

1. 先把HTML结构改对，给每个单选框加唯一的value #

Bootstrap的btn-group-toggle本质是用按钮来触发隐藏的单选框，所以每个单选框必须满足两个条件：同一组的name要一致，每个单选框要有自己独有的value。比如：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="select_option" id="opt1" value="option_a" checked> 选项A
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="select_option" id="opt2" value="option_b"> 选项B
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="select_option" id="opt3" value="option_c"> 选项C
  </label>
</div>

这里划重点：

• 所有单选框的name必须相同，这样它们才是互斥的同一组，只能选一个
• 每个value要设置成你实际需要提交的内容，比如"option_a"，别留空或者用默认的'on'
• 初始默认选中的那个单选框要加checked属性

2. 确保表单提交时能正确拿到值 #

当你提交表单后，后端就可以通过你设置的name（比如上面的select_option）来获取选中的单选框的value。比如用PHP的话就是$_POST['select_option']，用Python Flask的话就是request.form.get('select_option')，这样拿到的就是你设置的对应值，再也不是固定的'on'了。

3. 排查样式和JS的干扰 #

你之前写的[type='radio'] { display: none; }是没问题的，Bootstrap本身也会隐藏原生单选框，但要注意别让自定义的JS代码干扰了单选框的选中状态。比如有没有写点击按钮的事件时，阻止了单选框的默认选中行为？如果有的话，得调整JS逻辑，保证点击按钮时对应的单选框能被正确选中。

给你一个完整的可运行示例：

<form method="POST" action="你的提交地址">
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="radio" name="fruit_choice" id="apple" value="apple" checked> 苹果
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="fruit_choice" id="banana" value="banana"> 香蕉
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="fruit_choice" id="orange" value="orange"> 橙子
    </label>
  </div>
  <button type="submit" class="btn btn-success mt-3">提交</button>
</form>
<!-- 注意：需要引入Bootstrap 4所需的jQuery、Popper.js以及Bootstrap JS文件，才能保证按钮组的切换交互正常工作 -->

4. 手动验证选中状态（可选） #

要是还是有问题，你可以用JS先手动检查选中的值，确认提交前是对的：

$('form').submit(function(e) {
  // 先阻止默认提交，检查值
  e.preventDefault();
  var selectedVal = $('input[name="fruit_choice"]:checked').val();
  console.log("当前选中的值：", selectedVal);
  // 确认没问题后再提交表单
  this.submit();
});

打开浏览器控制台就能看到选中的值是否正确，这样就能排除是后端接收还是前端设置的问题了。

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