使用Rails与Stimulus实现条件表单：单选按钮取值异常排查

一、Radio按钮值获取问题修复 #

你遇到的问题大概率是Stimulus控制器中获取值的方式不对——radio按钮组里不能直接取第一个元素的value，得找当前被选中的那一个。以下是修正后的代码示例：

1. 正确的Stimulus控制器 #

// app/javascript/controllers/question_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  // 绑定radio按钮组的容器
  static targets = ["radioGroup"]

  updateQuestion() {
    // 从组内筛选出被选中的radio
    const selectedRadio = this.radioGroupTarget.querySelector('input[type="radio"]:checked')
    if (!selectedRadio) return

    const selectedValue = selectedRadio.value
    this.toggleQuestionBlocks(selectedValue)
  }

  toggleQuestionBlocks(value) {
    // 隐藏所有后续问题区块，显示对应值的区块
    document.querySelectorAll('.question-block').forEach(block => {
      block.style.display = 'none'
    })
    const targetBlock = document.querySelector(`.question-block[data-value="${value}"]`)
    if (targetBlock) targetBlock.style.display = 'block'
  }
}

2. 对应的Simple_form视图代码 #

<%= simple_form_for @recommendation do |f| %>
  <div data-controller="question">
    <!-- radio组容器，绑定target -->
    <div data-question-target="radioGroup" data-action="change->question#updateQuestion">
      <%= f.radio_buttons :platform, [["PC", "pc"], ["主机", "console"], ["手机", "mobile"]] %>
    </div>

    <!-- 后续问题区块，默认隐藏非初始项 -->
    <div class="question-block" data-value="pc">
      <%= f.input :pc_genre, collection: ["FPS", "RPG", "模拟经营"] %>
    </div>
    <div class="question-block" data-value="console" style="display: none;">
      <%= f.input :console_genre, collection: ["动作冒险", "体育竞技", "格斗"] %>
    </div>
    <div class="question-block" data-value="mobile" style="display: none;">
      <%= f.input :mobile_genre, collection: ["休闲益智", "卡牌", "MOBA"] %>
    </div>
  </div>

  <%= f.button :submit %>
<% end %>

核心修正点：

• 把事件绑定到radio组的容器上，确保任何radio选项变化都能触发事件
• 通过:checked选择器获取当前选中的radio值，而非固定取第一个元素

二、问题与答案存入模型的合理性 #

完全合理，甚至是推荐的设计方案，原因如下：

1. 可维护性：后续修改问题文本、调整选项时，直接操作数据库或模型逻辑即可，无需改动视图代码
2. 灵活性：支持动态生成问题序列（比如给不同用户展示不同的问答分支），不用硬编码在视图里
3. 数据可追溯：方便记录用户的问答历史，后续可以基于这些数据优化推荐算法

简单模型设计参考 #

# app/models/question.rb
class Question < ApplicationRecord
  has_many :options, dependent: :destroy
  validates :title, :key, presence: true # key用于标识问题，比如"platform"
end

# app/models/option.rb
class Option < ApplicationRecord
  belongs_to :question
  validates :text, :value, presence: true
  # 可选：添加next_question_key字段，用于指定选中该选项后跳转的下一个问题
end

后续可以通过模型动态渲染所有问题，甚至结合Turbo Stream实现无刷新加载后续问题，扩展性会更强。

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