如何使用 jquery 以 rails 形式显示/隐藏？

Question

我有一个rails视图（erb），它显示一些复选框（来自种子的填充数据）。选择某些复选框时，我需要一个div，以下面收集更多信息。例如：用户检查“周年纪念日”和它下面的 div 出现在询问日期。 jquery 是最好的方法吗？咖啡本？

*注意：我使用 Wicked gem 来创建一个多步骤

这里是视图：

<%= render layout: 'form' do |f| %>

<% for holiday in Holiday.find(:all) %>
 <label class="checkbox">
  <%= check_box_tag "user[holiday_ids][]", holiday.id, @user.holidays.include?(holiday) %>
  <%= holiday.name %>
</label>

这里是渲染的 html（无论如何是表单部分）：

<form accept-charset="UTF-8" action="/user_steps/interests" class="edit_user" id="edit_user_3"     method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="lub8Fb5pvkxwgb3hGT66U14QBNKLOLfEwaLLw9Ts2WU=" /></div>


<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="1" />
 New Years Day
</label>

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="2" />
 Valentine Day
</label>

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="3" />
 Easter
</label>

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="4" />
 Mother Day
</label>

<label class="checkbox">
  <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="5" />
  Father's Day
</label>

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="6" />
 Halloween
</label>

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="7" />
 Thanksgiving
</label>

<label class="checkbox">
  <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="8" />
  Christmas

谢谢！

Answer 1

我认为你应该做类似的事情

  if( $(#check_box_id).is(':checked')) {      
          $("#div_id").show();        
     } else {         
          $("#div_id").hide();        
   }         

这不是完美的代码，但您可以使用 .hide() 和 .show() 方法来实现。
我希望这会对你有所帮助。
谢谢。

Answer 2

Hiya demo http://jsfiddle.net/z862m/ 和来自您的站点链接提供的解决方案在这里：http://jsfiddle.net/2UfBy/

所以演示会做你提到的。即，当勾选复选框时，相应的div将显示，当未选中它不会。 B-)

[quote] 当某些复选框被选中时，我需要在其下方显示一个 div，以收集更多信息。例如：用户选中“周年纪念”，它下方的 div 会出现询问日期...[unquote] :)

jQuery 代码

$(".checkbox").click(function(){

   $(this).next("div").toggle();    

});​

HTML

<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="2" />
 Valentine Day
</label>
<div style="display:none;">
    Whatever you have to capture here<input type="text" id="foo" />
</div>
</br>
<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="3" />
 Easter
</label>
<div style="display:none;">
    Whatever you have to capture here<input type="text" id="foo1" />
</div>
</br>
<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="4" />
 Mother Day
</label>
<div style="display:none;">
    Whatever you have to capture here<input type="text" id="foo2" />
</div>
</br>
<label class="checkbox">
  <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="5" />
  Father's Day
</label>
<div style="display:none;">
    Whatever you have to capture here<input type="text" id="foo3" />
</div>
</br>
<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="6" />
 Halloween
</label>
<div style="display:none;">
    Whatever you have to capture here<input type="text" id="foo4" />
</div>
</br>
<label class="checkbox">
 <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="7" />
 Thanksgiving
</label>
</br>
<label class="checkbox">
  <input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="8" />
  Christmas
</label>​

Answer 3

这是我想出的最简单的方法。

1. 确保您的 application.js 文件中有 jquery 和 jquery-ujs。

//= require jquery
//= require jquery-ujs

（确保您的 gemfile 中也安装了 Jquery gem。）

1. 在表单底部添加脚本标签。

<script>
$("#id_of_checkbox").click(function(){
    $('div#id_of_html_element').toggle();
})
</script>

1. 根据您想要切换的内容，确保您的 ID 正确无误。我将发布一个更新的 JS 函数，我将编写它以使其更容易。

更新：我把它做成了一个简单的函数，如果你想把它存储在 Rails 类型的地方，你可以把它放在任何 JS 文件中。

<script>
function showHiddenOptions(info_id) {
        $('#' + info_id).toggle();
    }
</script>

然后，将其添加到您想要具有此功能的输入中： onclick: "showHiddenOptions('ID_OF_OPTIONS')"

确保括号也正确，因为这对于函数正确查看此信息很重要！

Answer 4

JQuery 是一个很好的方法。您需要在 application.js 文件中使用适当的 require 语句才能使用 JQuery

//= require jquery.js

实现它的一种简单方法是用 span 标签包围您想要显示和/或隐藏的所有内容，然后使用 JQuery 从您的 *.js.erb 文件中触发您的 span 标签上的显示/隐藏

您可以使用以下 respond_with 块来指定 format.js (javascript) 响应。代码位于与表单名称匹配的控制器方法名称中：

def hide_show_form
  respond_with do |format|
    format.js
  end
end

这将导致 hide_show_form.js.erb 先运行，然后再渲染 hide_show_form.html.erb 中的 HTML。

hide_show_form.js.erb

$('span#hide_and_show').hide();  // hide the appropriate span tag right away 
function showHiddenForm() {      // this can be triggered using :onclick
    if ($('span#hide_and_show').css('display') == 'none') {
        $('span#hide_and_show').show();
    } else {
        $('span#hide_and_show').hide();
    }
}

hide_show_form.html.erb

<%= check_box_tag(:hide_show_checkbox, "hide_show_checkbox", false, :onclick=>"showHiddenForm();") %>
<span id="hide_and_show">
    <%= label_tag(:optional_data, "You might not always see this field:") %>&nbsp&nbsp
    <%= text_field_tag(:optional_data) %>
</span>

此示例指定 check_box_tag 的 :onclick 属性以调用 js.erb 文件中的 JavaScript 函数 showHiddenForm()。