如何将JavaScript与Rails单选按钮集合关联以切换表单显示

点击Rails生成的单选按钮后，预设隐藏的表单区域无响应，无法根据选中值切换显示对应表单集合。

核心原因 #

从生成的HTML代码可看出，单选按钮的name属性为need[number]，但原有JS代码中的选择器使用name="number"，两者不匹配，导致事件监听未绑定到正确元素上。此外还有几处可优化的细节。

修复步骤 #

1. 修正JS选择器匹配正确的name属性 #

将JS中的选择器修改为匹配Rails生成的单选按钮name值：

// 原错误选择器
// $('input[type="radio"][name="number"]')
// 修改后
$('input[type="radio"][name="need[number]"]')

2. 优化JS代码（简洁性提升） #

用jQuery方法替代原生DOM操作，保持代码风格一致，同时处理其他数字选项的隐藏逻辑：

<script type="text/javascript">
// 初始隐藏所有表单区域
$("#one, #two").hide();

$(document).ready(function() {
  $('input[type="radio"][name="need[number]"]').change(function() {
    switch(this.value) {
      case '1':
        $("#one").show();
        $("#two").hide();
        break;
      case '2':
        $("#two").show();
        $("#one").hide();
        break;
      default:
        // 选中3-6时隐藏所有表单
        $("#one, #two").hide();
    }
  });
});
</script>

3. 确保jQuery加载顺序正确 #

当前jQuery引用在页脚，若JS代码放在页面头部，会因jQuery未加载导致报错。需将JS代码移至jQuery引用之后，或保持$(document).ready()包裹代码（该方法会等待DOM和依赖加载完成后执行）。

4. 可选：设置初始选中状态 #

若需默认选中某个选项并显示对应表单，可在Rails视图代码中添加checked参数：

<%= form.collection_radio_buttons(:number, [["1", '1'],["2", '2'],["3", '3'],["4", "4"],["5", "5"],["6", "6"]], :first, :last) do |b| %>
  <%= b.label { b.radio_button(checked: b.value == '1') + image_tag(b.text+'.png') } %>
<% end %>

同时在JS初始化时，根据初始选中值触发一次change事件，确保表单显示正确：

$(document).ready(function() {
  const $radio = $('input[type="radio"][name="need[number]"]');
  $radio.change(function() {
    // 切换逻辑...
  });
  // 触发初始选中的单选按钮的change事件
  $radio.filter(':checked').change();
});

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