1

いくつかのチェックボックス (seed.rb から入力されたデータ) を表示する 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

ありがとう！

4

4 に答える 4

2

Hiyaデモ 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>​
于 2012-05-12T09:14:04.327 に答える
2

私はあなたが次のようなことをすべきだと思います

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

これは完璧なコードではありませんが、.hide() および .show() メソッドで実行できます。
これがお役に立てば幸いです。
ありがとう。

于 2012-05-12T07:13:20.977 に答える
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 に答える