如何在Rails Simple Form中用jQuery基于单选按钮选中状态渲染输入表单

没问题，我来帮你搞定这个功能！咱们一步步来：

首先，先保留你现有的单选按钮代码，然后添加两个分别对应「Email」和「Url」的输入表单区域，默认先把它们藏起来，避免一开始就全部显示：

<div class="form-group">
  <label class="col-md-1 control-label"></label>
  <div class="col-md-9">
    <%= f.input :job_application_type, as: :radio_buttons, collection: [['Apply By Email', 'Email'], ['Apply By Url', 'Url']], :label => "How to apply" %>
  </div>
</div>

<!-- 对应Email的表单，默认隐藏 -->
<div id="email_apply_form" class="form-group" style="display: none;">
  <label class="col-md-1 control-label">申请邮箱</label>
  <div class="col-md-9">
    <%= f.input :application_email, label: false, placeholder: "请填写接收申请的邮箱地址" %>
  </div>
</div>

<!-- 对应Url的表单，默认隐藏 -->
<div id="url_apply_form" class="form-group" style="display: none;">
  <label class="col-md-1 control-label">申请链接</label>
  <div class="col-md-9">
    <%= f.input :application_url, label: false, placeholder: "请填写申请跳转链接" %>
  </div>
</div>

这里我直接用style="display: none;"来隐藏表单，如果你用了Bootstrap，换成hidden类也完全没问题。

接下来是核心的jQuery逻辑，用来监听单选按钮的切换事件，动态显示/隐藏对应表单：

$(document).ready(function() {
  // 页面加载时先检查默认选中的选项，显示对应表单
  const defaultSelected = $('input[name="job[job_application_type]"]:checked').val();
  if (defaultSelected === 'Email') {
    $('#email_apply_form').show();
  } else if (defaultSelected === 'Url') {
    $('#url_apply_form').show();
  }

  // 监听单选按钮的切换事件
  $('input[name="job[job_application_type]"]').on('change', function() {
    const selectedValue = $(this).val();
    
    // 先把两个表单都隐藏
    $('#email_apply_form, #url_apply_form').hide();
    
    // 根据选中的值显示对应表单
    if (selectedValue === 'Email') {
      $('#email_apply_form').show();
    } else if (selectedValue === 'Url') {
      $('#url_apply_form').show();
    }
  });
});

简单解释下代码： #

• $(document).ready()：确保页面DOM加载完成后再执行JS，避免找不到元素的问题。
• 初始状态检查：处理页面刷新或者表单默认选中某选项的情况，保证一打开页面状态就是对的。
• change事件监听：用户切换单选按钮时，先统一隐藏所有表单，再显示选中类型对应的表单，不会出现两个表单同时显示的混乱情况。

小提醒： #

注意单选按钮的name属性哦，我这里写的job[job_application_type]是Rails表单默认生成的格式，如果你实际项目里的name不一样，记得改成你自己的——可以用浏览器开发者工具查看单选按钮的真实name属性。

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