如何获取选中的input type="button"按钮值并用于数据库搜索？

没问题，要搞定这个需求其实很简单——Bootstrap的button('toggle')方法会在按钮被选中时给它加上active类，取消选中时移除这个类，我们完全可以利用这个标记来收集选中的按钮值，再用这些值做搜索。

方案一：AJAX异步提交（推荐） #

这种方式不用刷新页面，体验更流畅。给提交按钮绑定点击事件，先收集选中值再发送请求：

$(document).ready(function(){
  // 保留你原有的按钮切换逻辑
  $(".btn-outline-primary").click(function(){
    $(this).button('toggle');
  });

  // 绑定提交按钮的点击事件
  $("#submit-btn").click(function(e){
    e.preventDefault(); // 阻止默认表单提交行为

    // 收集所有选中按钮的value值
    const selectedModalities = $(".btn-outline-primary.active").map(function() {
      return $(this).val();
    }).get(); // 把jQuery对象转换成普通数组

    // 现在selectedModalities里就是所有选中的选项，比如["MR", "CT"]
    console.log("选中的检查类型：", selectedModalities);

    // 发送AJAX请求到后端搜索接口
    $.ajax({
      url: "/your-search-endpoint", // 替换成你的实际搜索接口地址
      method: "POST", // 根据后端要求选择GET/POST
      data: {
        modalities: selectedModalities // 把选中值作为参数传递
      },
      success: function(response) {
        // 处理搜索结果，比如渲染到页面上
        console.log("搜索结果：", response);
        // 示例：把结果插入到指定容器
        $("#search-results").html(response);
      },
      error: function(err) {
        console.error("搜索请求失败：", err);
      }
    });
  });
});

方案二：表单隐藏域提交 #

如果按钮和提交按钮在同一个表单里，可以把选中值放到隐藏输入框，再提交整个表单：

<!-- 在表单内添加隐藏输入框 -->
<form id="search-form">
  <!-- 你的按钮组代码 -->
  <div class="form-row">
    <div class="btn-group">
      <!-- ... 你的按钮代码 ... -->
    </div>
  </div>
  <!-- 用于存储选中值的隐藏输入框 -->
  <input type="hidden" name="modalities" id="selected-modalities">
  <button type="submit" id="submit-btn">搜索</button>
</form>

对应的JS代码：

$(document).ready(function(){
  $(".btn-outline-primary").click(function(){
    $(this).button('toggle');
  });

  // 绑定表单提交事件
  $("#search-form").submit(function(e){
    e.preventDefault();

    // 收集选中值
    const selectedValues = $(".btn-outline-primary.active").map(function() {
      return $(this).val();
    }).get();

    // 把选中值转为逗号分隔的字符串（或直接传数组，取决于后端接收方式）
    $("#selected-modalities").val(selectedValues.join(","));

    // 重新提交表单
    $(this).unbind('submit').submit();
  });
});

关键说明 #

• 核心逻辑是通过.btn-outline-primary.active选择器筛选选中按钮，Bootstrap的toggle功能会用active类标记选中状态。
• map()方法可以简洁收集按钮值，get()把jQuery对象转为普通数组，方便后续处理。
• 后端接收参数时，如果是逗号分隔的字符串，记得拆分；如果直接传数组，要确保后端支持（比如PHP中用modalities[]作为参数名）。

内容的提问来源于stack exchange，提问作者iraklis.s