チェックボックスに基づいて表の行の表示/非表示を切り替えることはできません。

Question

フォームを使用して、ドロップダウンの値を変更すると、行が非表示になります。私が働くことができないのは、チェックボックスに基づいて行を隠すか再表示することです。

マイJavascript_tagが

<%= javascript_tag do %> 
     $(document).ready(function(){ 
    //  if($("#observation_discussed_with_employee").is('checked'){ 
       $(".hidden_option_date_discussed").fadeIn('slow'); 
       alert("test"); 
    //  } 
     }); 
<% end %> 

style_add.cssは、私は他の表示/非表示は、私は、私はこのスタイルシートを使用することができる午前知っている作品（<%= stylesheet_link_tag "style_adds" %>とリンクしているスタイルシートを持っている

.hidden_option{ 
    display: none; 
} 

.hidden_option_date_discussed{ 
    display: none; 
} 

です

チェックボックスフィールドとそれに続くフィールドは、非表示にする/非表示にします

<tr> 
       <div id="discussed"> 
       <td><%= f.label :discussed_with_employee %></td> 
       <td><%= f.check_box :discussed_with_employee %></td> 
       </div> 
     </tr> 

     <tr class="hidden_option_date_discussed"> 

if文が表示されているページを実行すると、警告ボックスが表示されます。しかし、もし私がifステートメントを解除したら、私はアラートを見ません。

 <div class="field" > 
      <td><%= f.label :date_discussed %></td> 
      <td><%= f.date_select(:date_discussed, :default => 0.days.from_now, min: 1.year.ago) %></td> 
     </div> 
</tr> 

Answer 1

問題はif文を使用していることです。 if文が動作する方法は一度起動すると、それだけです。あなたが探している機能はchange()です。だから、それは次のようになります。

$(document).ready(function(){ 
    $("#observation_discussed_with_employee").change(function(){ 
     if($("#observation_discussed_with_employee").is('checked'){ 
      $(".hidden_option_date_discussed").fadeIn('slow'); 
      alert("test"); 
     } 
    }); 
}); 

これは、if文たび#observation_discussed_with_employee変化（それをチェック、または未チェックだのいずれか）の値を発生させます。

編集：コメントの誰かが言ったように、fadeOutでelse文を作成する必要があるので、どちらの方法でも動作します。

Answer 2

問題は、チェックボックスにバインドできないために発生したようです。私は少し違いをつけて、チェックボックスをtrue/falseに設定された値で 'yes/no'に変更しました。

は私はjavascriptの

if($("#observation_testchk").val() == "true"){ 
     $(".hidden_option_date_discussed").fadeIn('slow'); 
      } 


    $("#observation_testchk").change(function(){ 
      if($("#observation_testchk").val() == "true"){ 
      //if($("#observation_testchk").val() == 1){ 
       $(".hidden_option_date_discussed").fadeIn('slow'); 
       } 
      else if ($("#observation_testchk").val() == "false"){ 
       $(".hidden_option_date_discussed").fadeOut('slow'); 
       } 
      }); 

に以下を追加してくれはい/いいえドロップダウンを提供します。このフィールド

  <div class="field"> 
      <td><%= f.label :testchk %></td> 
      <td><%= f.select :testchk, [['Yes','true'],['No','false']] %></td> 
      </div> 

を追加しました。 「はい」または「いいえ」を選択すると、他のフィールドが適切に表示/非表示になります。私はまだ少しコードをきれいにする必要がありますが、主なレッスンは：

私はチェックボックスにバインドするJSを取得できませんでした。ただし、ドロップダウンにバインドされます。