如何通过单选按钮状态为simple_form动态切换erb提交路由？

嘿，我来帮你搞定这个需求！其实核心思路是用JavaScript动态修改表单的提交路径，因为ERB是服务器端渲染的，页面加载后没法直接把客户端的active状态传回给ERB重新生成路由——但我们完全可以在客户端直接调整表单的action属性，同时同步单选按钮的active样式。下面是一步步的实现方案：

1. 先在ERB里搭建表单和单选按钮组 #

我们用radio_button_tag来创建两个单选按钮，把对应的路由路径直接存在按钮的value里，这样JS可以直接拿到目标路径。同时给单选按钮的标签加上类，方便做active样式切换：

<%= simple_form_for :search, url: product_index_path, method: :get, html: { id: 'search-form' } do |f| %>
  <!-- 单选按钮组 -->
  <div class="search-radio-group">
    <%# 默认选中Product选项 %>
    <%= radio_button_tag :search_target, product_index_path, true, class: 'search-radio', id: 'radio-product' %>
    <%= label_tag :radio_product, 'Product', class: 'search-radio-label active' %>

    <%= radio_button_tag :search_target, profile_index_path, false, class: 'search-radio', id: 'radio-profile' %>
    <%= label_tag :radio_profile, 'Profile', class: 'search-radio-label' %>
  </div>

  <!-- 你的搜索输入框 -->
  <%= f.input :query, placeholder: "输入关键词搜索..." %>
  <%= f.button :submit, '搜索' %>
<% end %>

2. 加一点点CSS美化active状态 #

把原生单选按钮隐藏，用标签来做可视化的按钮样式，这样active状态更明显：

/* 隐藏原生单选按钮 */
.search-radio {
  display: none;
}

/* 单选按钮标签的基础样式 */
.search-radio-label {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 8px;
}

/* 选中时的active样式 */
.search-radio-label.active {
  background-color: #0d6efd;
  color: white;
  border-color: #0d6efd;
}

3. 用JS监听切换，动态修改表单路由 #

这一步是核心：监听单选按钮的change事件，切换active类的同时，把表单的action属性改成选中按钮对应的路由路径：

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('search-form');
  const radioButtons = document.querySelectorAll('.search-radio');
  const radioLabels = document.querySelectorAll('.search-radio-label');

  // 给每个单选按钮绑定切换事件
  radioButtons.forEach(radio => {
    radio.addEventListener('change', function() {
      // 1. 更新表单的提交路径
      form.action = this.value;
      
      // 2. 同步切换active类
      radioLabels.forEach(label => label.classList.remove('active'));
      const targetLabel = document.querySelector(`label[for="${this.id}"]`);
      if (targetLabel) {
        targetLabel.classList.add('active');
      }
    });
  });
});

可选：记住用户的选择（优化体验） #

如果想让用户刷新页面后保留之前的选择，可以把选中的路由存在localStorage里，页面加载时自动恢复：

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('search-form');
  const radioButtons = document.querySelectorAll('.search-radio');
  const radioLabels = document.querySelectorAll('.search-radio-label');

  // 页面加载时恢复之前的选择
  const savedTarget = localStorage.getItem('searchTarget');
  if (savedTarget) {
    const targetRadio = document.querySelector(`.search-radio[value="${savedTarget}"]`);
    if (targetRadio) {
      targetRadio.checked = true;
      form.action = savedTarget;
      // 更新标签的active状态
      radioLabels.forEach(label => label.classList.remove('active'));
      const targetLabel = document.querySelector(`label[for="${targetRadio.id}"]`);
      if (targetLabel) targetLabel.classList.add('active');
    }
  }

  // 监听切换事件，同时保存选择到localStorage
  radioButtons.forEach(radio => {
    radio.addEventListener('change', function() {
      form.action = this.value;
      localStorage.setItem('searchTarget', this.value);
      
      radioLabels.forEach(label => label.classList.remove('active'));
      const targetLabel = document.querySelector(`label[for="${this.id}"]`);
      if (targetLabel) targetLabel.classList.add('active');
    });
  });
});

这样就完美实现需求啦：切换单选按钮时，表单会自动指向对应的路由，同时按钮的样式也会同步高亮~

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