如何显示/隐藏在轨使用jQuery形成的？(How to show/hide in rails fo

我有一个导轨视图（ERB），其显示了一些复选框（从seed.rb填充的数据）。当某些复选框被选中，我需要一个div出现在它下面，收集更多的信息。例如：用户检查“周年”和它下面一个div出现要求的日期。是jQuery来做到这一点的最好方法是什么？ Coffescript？

*注：进出口使用的妖兽宝石创建一个多

继承人的观点：

<%= 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();        
   }

这不是完美的代码，但你coud与.hide（）和.show（）方法做到这一点。
我希望这能帮到您。
谢谢。

Answer 2:

你好演示 http://jsfiddle.net/z862m/ ，并从你的网站链接提供的解决方案是在这里： http://jsfiddle.net/2UfBy/

因此，演示会做你所提到的。即当复选框被选中相应的div会显示和未选中时，它不会。 B-）

【引用】当某些复选框被选中，我需要一个div出现在它下面，收集更多信息。例如：用户检查“纪念日”和一个div它下面会出现要求的日期...... [引文结束] :)

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:

jQuery是做一个好办法。你需要合适的语句需要在你的application.js文件中使用jQuery

//= require jquery.js

一个简单的方法把它关闭，将围绕着你想要显示的一切和/或跨度标签隐藏，然后使用jQuery从* .js.erb文件触发您的跨度标签的显示/隐藏

您可以使用以下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>

本例指定一个：一的onclick的check_box_tag属性呼叫JavaScript功能，showHiddenForm（）在js.erb文件。

文章来源: How to show/hide in rails form with jquery?