首先，如果这个问题很愚蠢，请原谅我，我刚刚开始了解 Rails，Javascript 和 jQuery 对我来说是一个全新的世界。
我发现了以下类似的问题，但根本不明白它们如何适用于我的情况：
话虽这么说，这是我的问题。
在我的 Rails 4 应用程序中，我有以下 Rails 表单（我是NOT使用简单形式）：
<div class="calendar_details">
<%= f.label :target_relationship %>
<%= radio_button_tag(:target_relationship, "B2C", :checked => true, :onclick=>"showMe('calendar_details_b2c')", {:class => "radio_button_target_relationship_b2C"}) %>
<%= label_tag(:target_relationship, "B2C") %>
<%= radio_button_tag(:target_relationship, "B2B", :onclick=>"showMe('calendar_details_b2b')", {:class => "radio_button_target_relationship_b2b"}) %>
<%= label_tag(:target_relationship, "B2B") %>
</div>
<div class="calendar_details">
<%= f.label :target_country %><%= f.country_select :target_country, ["United States"] %>
</div>
<div id="calendar_details_b2c">
<div class="calendar_details">
<%= f.label :target_gender %><%= radio_button_tag(:target_gender, "Female") %><%= label_tag(:target_relationship, "Female") %><%= radio_button_tag(:target_gender, "Male") %><%= label_tag(:target_relationship, "Male") %><%= radio_button_tag(:target_gender, "Both", :checked => true) %><%= label_tag(:target_relationship, "Both") %>
</div>
<div class="calendar_details">
<%= f.label :target_age_lower_limit %><%= f.select :target_age_lower_limit, (0..99) %>
</div>
<div class="calendar_details">
<%= f.label :target_age_upper_limit %><%= f.select :target_age_upper_limit, (0..99) %>
</div>
<div class="calendar_details">
<%= f.label :target_household_income_lower_limit %><%= f.select :target_household_income_lower_limit, ['Less than $10,000', '$10,000', '$20,000', '$30,000', '$40,000', '$50,000', '$60,000', '$70,000', '$80,000', '$90,000', '$100,000', '$110,000', '$120,000', '$130,000', '$140,000', '$150,000', '$160,000', '$170,000', '$180,000', '$190,000', '$190,000', '$200,000', 'More than $200,000'] %>
</div>
<div class="calendar_details">
<%= f.label :target_household_income_upper_limit %><%= f.select :target_household_income_upper_limit, ['Less than $10,000', '$10,000', '$20,000', '$30,000', '$40,000', '$50,000', '$60,000', '$70,000', '$80,000', '$90,000', '$100,000', '$110,000', '$120,000', '$130,000', '$140,000', '$150,000', '$160,000', '$170,000', '$180,000', '$190,000', '$190,000', '$200,000', 'More than $200,000'] %>
</div>
</div>
<div id="calendar_details_b2b">
<div class="calendar_details">
<%= f.label :target_company_size %><%= f.select :target_company_size, ['Self-employed', '1-10 employees', '11-50 employees', '51-200 employees', '201-500 employees', '501-1,000 employees', '1,001-5,000 employees', '5,001-10,000 employees', 'More than 10,000 employees'] %>
</div>
<div class="calendar_details">
<%= f.label :target_industry %><%= f.select :target_industry, ['Art & Entertainment', 'Autos & Vehicles', 'Beauty & Fitness', 'Books & Litterature', 'Business & Industrial', 'Computer & Electronics', 'Finance', 'Food & Drinks', 'Games', 'Hobbies & Leisure', 'Home & Garden', 'Internet & Telecom', 'Jobs & Education', 'Law & Government', 'News', 'Online Communities', 'People & Society', 'Pets & Animals', 'Real Estate', 'Science', 'Shopping', 'Sports', 'Travel'] %>
</div>
</div>
根据用户在第一个单选按钮（“B2C”或“B2B”）上检查的内容，我想显示calendar_details_b2c div， 或者calendar_details_b2b div.
我知道我需要隐藏两者divs，然后实现某种形式的条件，检查哪个单选按钮被选中，最后显示正确的div.
正如你所看到的，我尝试添加一个onclick选项和一些特定的类到我的单选按钮，但后来我陷入困境：我不知道如何构建正确的 js 函数，而且我不知道在哪里包含它（在.html.erb表单的文件，在应用程序的标题中，在application.js file?).
—————
UPDATE：根据 Ziv Galili 的回答，这是我现在所拥有的：
In app/assets/javascript/custom/calendars.js:
$(document).ready(function() {
$('input[type=radio][name=calendar').change(function () {
// first: hide all the divs
$('#calendar_details_b2c').css("display","none");
$('#calendar_details_b2b').css("display","none");
// then get the div ID to show (I stored it in the "value" of the radio button)
var fieldToShow = $(this).val();
// now use jQuery selector and change the display setting of that field
$("#" + fieldToShow).css("display","block");
});
});
In application.js，我补充说//= require_tree ./custom在我的应用程序中考虑上述代码。
在我的表格所在的视图中（Calendars#New视图），我现在有：
<div class="calendar_details">
<%= f.label :target_relationship, "Business relationship" %>
<%= f.radio_button :target_relationship, "calendar_details_b2c", :checked => true %>
<%= f.label(:target_relationship, "B2C") %>
<%= f.radio_button :target_relationship, "calendar_details_b2b", :checked => false %>
<%= f.label(:target_relationship, "B2B") %>
</div>
<div class="calendar_details">
<%= f.label :target_country, "Country" %><%= f.country_select :target_country, ["United States"] %>
</div>
<div id="calendar_details_b2c">
<div class="calendar_details">
<%= f.label :target_gender, "Gender" %><%= radio_button_tag(:target_gender, "Female") %><%= label_tag(:target_relationship, "Female") %><%= radio_button_tag(:target_gender, "Male") %><%= label_tag(:target_relationship, "Male") %><%= radio_button_tag(:target_gender, "Both", :checked => true) %><%= label_tag(:target_relationship, "Both") %>
</div>
<div class="calendar_details">
<%= f.label :target_age_lower_limit, "Age / Lower limit" %><%= f.select :target_age_lower_limit, (0..99) %>
</div>
<div class="calendar_details">
<%= f.label :target_age_upper_limit, "Age / Upper limit" %><%= f.select :target_age_upper_limit, (0..99) %>
</div>
<div class="calendar_details">
<%= f.label :target_household_income_lower_limit, "Household income / Lower limit" %><%= f.select :target_household_income_lower_limit, ['Less than $10,000', '$10,000', '$20,000', '$30,000', '$40,000', '$50,000', '$60,000', '$70,000', '$80,000', '$90,000', '$100,000', '$110,000', '$120,000', '$130,000', '$140,000', '$150,000', '$160,000', '$170,000', '$180,000', '$190,000', '$190,000', '$200,000', 'More than $200,000'] %>
</div>
<div class="calendar_details">
<%= f.label :target_household_income_upper_limit, "Household income / Upper limit" %><%= f.select :target_household_income_upper_limit, ['Less than $10,000', '$10,000', '$20,000', '$30,000', '$40,000', '$50,000', '$60,000', '$70,000', '$80,000', '$90,000', '$100,000', '$110,000', '$120,000', '$130,000', '$140,000', '$150,000', '$160,000', '$170,000', '$180,000', '$190,000', '$190,000', '$200,000', 'More than $200,000'] %>
</div>
</div>
<div id="calendar_details_b2b">
<div class="calendar_details">
<%= f.label :target_company_size, "Company size" %><%= f.select :target_company_size, ['Self-employed', '1-10 employees', '11-50 employees', '51-200 employees', '201-500 employees', '501-1,000 employees', '1,001-5,000 employees', '5,001-10,000 employees', 'More than 10,000 employees'] %>
</div>
<div class="calendar_details">
<%= f.label :target_industry, "Industry" %><%= f.select :target_industry, ['Art & Entertainment', 'Autos & Vehicles', 'Beauty & Fitness', 'Books & Litterature', 'Business & Industrial', 'Computer & Electronics', 'Finance', 'Food & Drinks', 'Games', 'Hobbies & Leisure', 'Home & Garden', 'Internet & Telecom', 'Jobs & Education', 'Law & Government', 'News', 'Online Communities', 'People & Society', 'Pets & Animals', 'Real Estate', 'Science', 'Shopping', 'Sports', 'Travel'] %>
</div>
</div>
然而，我似乎无法做到这一点：当我访问Calendars#New视图中，我确实看到了选择 B2C 或 B2B 的单选按钮，但无论我选择哪个按钮，下面都不会显示任何内容（B2C 部分和 B2B 部分都没有）。
我缺少什么？
—————
UPDATE 2：所以，我更新了我的代码作为Ziv Galili的新评论，即：注意按钮组的名称，它实际上是calendar[target_relationship].
当我这样做并尝试进入我的视图时，我得到了一个execJS::RuntimeError，这让我意识到我们使用的是纯 JavaScript，而我的 Rails 应用程序似乎使用的是 CoffeeScript。
所以，我删除了app/assets/javascript/custom/calendars.js，将 Ziv Galili 的代码转换为 CoffeeScript 并将其添加到 app/assets/javascript/calendars.coffee 中：
$('input[type=radio][name=calendar[target_relationship]]').change ->
# first: hide all the divs
$('#calendar_details_b2c').css 'display', 'none'
$('#calendar_details_b2b').css 'display', 'none'
# then get the div ID to show (i stored it in the "value" of the radio button
fieldToShow = $(this).val()
# now use jQuery selector and change the display setting of that field
$('#' + fieldToShow).css 'display', 'block'
return
我也更换了//= require_tree ./custom with //= require_tree .以确保我所有的.coffee文件是通过加载的application.js.
尽管更新了所有这些代码，我仍然没有得到我期望的结果：没有一个divs 显示在我的视图中：
我一定错过了一些非常非常明显的东西，但我不知道它是什么。
任何想法？
—————
任何形式的帮助将不胜感激。
我会做这样的事情：
jsFiddle
解释：
假设 HTML 为：
<form action="">
<input type="radio" name="calendars" value="calendar_details_b2b">B2B
<br>
<input type="radio" name="calendars" value="calendar_details_b2c">B2C
</form>
<div id="calendar_details_b2c" style=>
content of B2C
</div>
<div id="calendar_details_b2b">
content of B2B
</div>
添加 css 代码，这样 div 就不会在页面加载时显示：
#calendar_details_b2c,
#calendar_details_b2b
{
display: none;
}
JS 代码将是：
$('input[type=radio][name=calendars]').change(function () {
// first: hide all the divs
$('#calendar_details_b2c').css("display","none");
$('#calendar_details_b2b').css("display","none");
// then get the div ID to show (i stored it in the "value" of the radio button
var fieldToShow = $(this).val();
// now use jQuery selector and change the display setting of that field
$("#" + fieldToShow).css("display","block");
});
UPDATE:
至于您的更新，请注意 JS 部分中按钮组的名称与 HTML 文件中的名称相匹配：
js:
$('input[type=radio][name=NAME_OF_BUTTON_GROUP]')
要在 HTML 中查找名称，您可以（在 chrome 中）：
<input checked="checked" id="something_calendar_details_b2c" name="这就是名字" type="radio" value="calendar_details_b2c">
注意：如果名称中有方括号（或任何其他特殊字符），则应该用撇号将其括起来
$('input[type=radio][name="calendar[target_relationship]"]')