Javascript 如何基于rails简单表单中选中的单选按钮呈现输入表单
我有两个单选按钮选项,我想显示一个输入表单,根据该表单使用JQuery单击单选按钮。这是我单选按钮的简单表单输入Javascript 如何基于rails简单表单中选中的单选按钮呈现输入表单,javascript,jquery,ruby-on-rails,radio-button,simple-form,Javascript,Jquery,Ruby On Rails,Radio Button,Simple Form,我有两个单选按钮选项,我想显示一个输入表单,根据该表单使用JQuery单击单选按钮。这是我单选按钮的简单表单输入 <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, collecti
<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>
如果选中第一个单选按钮,我想显示此输入
<div class="form-group show-job-email" style="display:none">
<label class="col-md-1 control-label"></label>
<div class="col-md-9">
<%= f.input :job_email, :label => "Job Email" %>
</div>
<div class="form-group show-job-url" style="display:none">
<label class="col-md-1 control-label"></label>
<div class="col-md-9">
<%= f.input :job_url, :label => "Job Url" %>
</div>
如果是第二个单选按钮,我想显示这个输入
<div class="form-group show-job-email" style="display:none">
<label class="col-md-1 control-label"></label>
<div class="col-md-9">
<%= f.input :job_email, :label => "Job Email" %>
</div>
<div class="form-group show-job-url" style="display:none">
<label class="col-md-1 control-label"></label>
<div class="col-md-9">
<%= f.input :job_url, :label => "Job Url" %>
</div>
只需像这样将更改事件绑定到单选按钮,并为表单组添加/删除特定类:
$(document).ready(function() {
$('input[type="radio"][name="job_application_type"]').change(function() {
if (this.value == 'Email') {
$('.form-group.show-job-url').addClass('form-group--inactive');
$('.form-group.show-job-email').removeClass('form-group--inactive');
}
else if (this.value == 'Url') {
$('.form-group.show-job-url').removeClass('form-group--inactive');
$('.form-group.show-job-email').addClass('form-group--inactive');
}
});
});
从表单组中删除样式设置,并将其放置在css文件中此表单组非活动类下
.form-group--inactive { display: none; }
它不起作用。这就是我更改表单组的方式,但现在,两个条件字段可见,更改功能不起作用。它们应该如下所示:,另一个相同,但最新的类名除外。我现在有这两个条件字段,但没有更改。条件输入字段仍然可见,更改功能现在正在工作。不知道我做错了什么,你在css文件中添加了。表单组不活动{display:none;}?我刚刚将其添加到css文件中,表单输入现在被隐藏。但是改变功能不起作用。我的js文件与您提供的答案相同。