Question

我有一个rails视图（erb），显示一些复选框（来自seed.rb的填充数据）..当选中某些复选框时，我需要在其下方显示一个div来收集更多信息。例如：用户检查“周年纪念日”和它下面的div似乎要求提供日期。 jquery是最好的方法吗？ Coffescript？

*注意：我使用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

来自您网站链接的演示 http://jsfiddle.net/z862m/ 和提供的解决方案位于：http://jsfiddle.net/2UfBy/

所以演示会做你提到的。即，勾选复选框时，将显示相应的div，如果未选中则不会。乙 - ）

[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

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（）。

Answer 4

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

确保您的application.js文件中包含jquery和jquery-ujs。

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

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

在表单底部添加一个脚本标签。

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

根据要切换的内容，确保您的ID是正确的。我将发布一个更新的JS函数，以使其变得更容易。

更新：我将其简化为一个简单的函数，如果要将其存储在Rails类型的地方，可以将其放入任何JS文件中。

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

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

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

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

4 个答案: