Rails 4forms：基于单选按钮选择的字段的条件显示

首先，请原谅我这个问题是否愚蠢，我刚开始围绕Rails，Javascript和jQuery对我来说是一个全新的世界。

我发现了以下类似的问题，但根本不明白它们如何适用于我的情况：

• 如果选中复选框，则显示/隐藏div
• 根据选中的单选按钮检查隐藏的输入字段
• 根据单选按钮选择显示表单域

话虽如此，这是我的问题。

在我的Rails 4应用程序中，我有以下Rails表单（我不使用简单表单）：

   true, :onclick=>"showMe('calendar_details_b2c')", {:class => "radio_button_target_relationship_b2C"}) %>  "showMe('calendar_details_b2b')", {:class => "radio_button_target_relationship_b2b"}) %>  
 
  
 
 
  true) %> 
 
  
 
  
 
  
 
  
 
 
 
  
 
  
  

根据用户检查第一个单选按钮（“B2C”或“B2B”）的内容，我想显示calendar_details_b2c div或calendar_details_b2b div 。

我知道我需要隐藏两个div ，然后实现某种forms的条件，检查选中哪个单选按钮，最后显示正确的div 。

正如你所看到的，我试图在我的单选按钮上添加一个onclick选项和一些特定的类，但后来我卡住了：我不知道如何构建正确的js函数，我不知道在哪里包含它（在表单的.html.erb文件中，在app的标题中，在application.js文件中？）。

—–

更新 ：根据Ziv Galili的回答，这是我现在拥有的：

在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"); }); }); 

在application.js ，我添加了//= require_tree ./custom来在我的应用程序中考虑上面的代码。

在我的表格是（ Calendars#New视图）的视图中，我现在有：

 
   true %>   false %>  
 
  
 
 
  true) %> 
 
  
 
  
 
  
 
  
 
 
 
  
 
  
  

但是，我似乎无法做到这一点：当我访问Calendars#New视图时，我确实看到单选按钮选择B2C或B2B，但无论我选择哪个按钮，下面都没有显示任何内容（B2C部分也没有B2B部分）。

我错过了什么？

—–

更新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替换了//= require_tree ./custom //= require_tree . 确保我的所有.coffee文件都是通过application.js加载的。

尽管所有这些代码更新，我仍然没有得到我期望的结果：我的视图中没有显示任何div ：

我必须遗漏一些非常非常明显的东西，但我无法弄清楚它是什么。

任何的想法？

—–

任何forms的帮助将受到高度赞赏。

Answer 1

我会做这样的事情：

的jsfiddle

说明：

让我们说HTML将是：

 
 B2B 
 B2C 
 
 content of B2C 
 
 content of B2B  

添加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"); }); 

更新：

至于你的更新，请注意在JS部分中，按钮组的名称与HTML文件中的名称相匹配：

JS：

 $('input[type=radio][name=NAME_OF_BUTTON_GROUP]') 

要在HTML中找到您的名称（在chrome中）：

1. 右键单击其中一个单选按钮
2. 按检查元素
3. 在元素检查器中查找输入的name属性

注意：如果名称（或任何其他特殊字符）中有方括号，则应使用撇号包装它

 $('input[type=radio][name="calendar[target_relationship]"]') 

Answer 2

您可以在js文件中轻松使用jQuery函数。

只是用

 $('input[type=radio][name=abc]').change(function() { // check radio button value by this.value // hide div blocks by $('div#id').hide(); }); 

Answer 3

  #divs div { display:none; } 

 
 
 
 
Register
 
User Name:
 
 
Password:
 
 
Name:
 
 
E-mail:
 
 
Phone Number:
 
 
StudentTeacher
 
 
 Student Class:
 
 Student Roll Number:
  
 
 Teacher type: