如何从Bootstrap list-group项向PHP文件传递数据？

嘿，这个问题我之前做表单的时候也碰到过！用Bootstrap的list-group替代单调的单选按钮确实能提升页面质感，要把选中的值传到PHP其实不难，给你两种实用的方案，按需选就行：

核心思路是把每个list-group项和一个隐藏的单选按钮绑定，利用<label>的特性，点击list-group项时自动选中对应的单选按钮，提交表单时就能把值传到PHP了。

修改后的HTML代码示例：

<div id="scelta_materia">
  <form method="POST" action="dopo.php">
    <div class="row spazio_scelta">
      <div class="col-4">
        <div class="list-group" id="list-tab" role="tablist">
          <!-- 用label包裹list-group项和隐藏的radio，点击项就会选中radio -->
          <label class="list-group-item list-group-item-action" for="materia1">
            <input type="radio" name="materia" id="materia1" value="数学" class="d-none">
            数学
          </label>
          <label class="list-group-item list-group-item-action" for="materia2">
            <input type="radio" name="materia" id="materia2" value="语文" class="d-none">
            语文
          </label>
          <label class="list-group-item list-group-item-action" for="materia3">
            <input type="radio" name="materia" id="materia3" value="英语" class="d-none">
            英语
          </label>
        </div>
      </div>
    </div>
    <button type="submit" class="btn btn-primary mt-3">提交</button>
  </form>
</div>

说明： #

• d-none类把单选按钮隐藏，只保留list-group的视觉效果
• 点击<label>包裹的list-group项时，会自动激活对应的单选按钮，Bootstrap的list-group-item-action还会提供点击反馈
• 提交表单后，在dopo.php里用$_POST['materia']就能拿到用户选中的值了

如果需要给选中项加自定义样式或者做额外交互，可以用JS监听点击事件，把选中的值存入隐藏字段。

第一步：在表单里添加隐藏字段 #

<input type="hidden" name="selected_materia" id="selected_materia" value="">

第二步：修改list-group的HTML（给每个项加数据属性存值） #

<div class="list-group" id="list-tab" role="tablist">
  <a class="list-group-item list-group-item-action" data-materia="数学">数学</a>
  <a class="list-group-item list-group-item-action" data-materia="语文">语文</a>
  <a class="list-group-item list-group-item-action" data-materia="英语">英语</a>
</div>

第三步：添加JavaScript逻辑 #

// 获取所有list-group项和隐藏字段
const listItems = document.querySelectorAll('.list-group-item');
const hiddenInput = document.getElementById('selected_materia');

listItems.forEach(item => {
  item.addEventListener('click', function() {
    // 移除所有项的active样式，避免多个选中状态
    listItems.forEach(i => i.classList.remove('active'));
    // 给当前点击的项添加active样式
    this.classList.add('active');
    // 把选中的值存入隐藏字段
    hiddenInput.value = this.dataset.materia;
  });
});

说明： #

• 点击list-group项时，会自动切换选中样式，并把data-materia里的值存入隐藏字段
• 提交表单后，在dopo.php里用$_POST['selected_materia']获取选中值

两种方案里，方案一不需要依赖JavaScript，就算用户禁用JS也能正常提交，适合简单场景；方案二更灵活，适合需要自定义交互的情况。

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