cannot unhide/hide table row based on a checkbox.

Question

I have a form working where changing the value of a dropdown will hide or display a row. What I can't get working is trying to hide or unhide a row based on a checkbox.

My Javascript_tag is

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

The style_add.css is

.hidden_option{
    display: none;
}

.hidden_option_date_discussed{
    display: none;
}

I have that stylesheet linked with <%= stylesheet_link_tag "style_adds" %> (the other hide/show works so I know I am able to use this stylesheet

The checkbox field and the subsequent field I want to hide/unhide is below

    <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 I run the page with the if statements remarked out as shown, I get the alert box. However, if I unremark the if statements, then I don't see an alert.

        <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

Your issue is the fact you're using a if statement. The way the if-statement works is it fires once, and that's it. The function you're looking for is change(). So it should be:

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

It fires the if-statement each time the value of #observation_discussed_with_employee changes (so when it's either checked, or unchecked).

Edit: As someone in the comments said, you still need to make an else-statement with fadeOut, so it works both ways.