1

I have a rails view (erb) that displays some checkboxes (populated data from seed.rb).. When certain checkboxes are selected i need a div to appear below it that collects more information.. For example: the user checks "anniversary"并且它下面的 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

谢谢！

4

4 回答 4

2

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

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

这不是完美的代码，但您可以使用 .hide() 和 .show() 方法来完成。
我希望这能帮到您。
谢谢。

于 2012-05-12T07:13:20.977 回答
2

Hiya演示 http://jsfiddle.net/z862m/ 并从您的站点链接提供的解决方案在这里：http: //jsfiddle.net/2UfBy/

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

[quote] 当某些复选框被选中时，我需要一个 div 出现在它下方，以收集更多信息。例如：用户选中“anniversary”并且它下面出现一个 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>​
于 2012-05-12T09:14:04.327 回答
1

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

  1. 确保文件中有 jquery 和 jquery-ujs application.js。
//= 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')"

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

于 2019-12-17T15:36:11.907 回答
0

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()。

于 2014-12-29T20:50:08.273 回答