Rails 4 - jQuery to hide/show form fields when radio button is moved to true
<p>I'm trying to figure out how to use jQuery in my Rails 4 app.</p>

<p>I have a boolean attribute in my table. I ask a question to get a true or false answer using radio buttons in the form.</p>

<p>If the answer is true, my objective is to ask follow up questions which are hidden until true is selected in the form.</p>

<p>I have this form question:</p>

<pre><code>&lt;%= f.input :ethics_relevance, as: :radio_buttons,  :label =&gt; 'Is an ethics review relevant?' %&gt;

&lt;/div&gt;  

&lt;div id="project_ethics_relevance_content" class="content hidden"&gt;

    &lt;div class="row"&gt;           
        &lt;%= f.simple_fields_for :ethics do |f| %&gt;
        &lt;%= render 'ethics/ethic_fields', f: f %&gt;
        &lt;% end %&gt;
    &lt;/div&gt;

    &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
            &lt;%= link_to_add_association 'Add an ethics consideration', f, :ethics, partial: 'ethics/ethic_fields' %&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;  
</code></pre>

<p>Then in my app/assets/javascripts/projects.js file, I have:</p>

<pre><code>jQuery(document).ready(function() {

   jQuery("#project_ethics_relevance").on('click', function() {
       console.log("here I am ")

           if (jQuery(this)[0].value) {
               jQuery('#project_ethics_relevance_content').removeClass('hidden');
           } else {
               jQuery('#project_ethics_relevance_content').addClass('hidden');
           }
   });

});
</code></pre>

<p>I know the attempt above is wrong, I tried to make it based on what I could glean from this post:</p>

<p><a href="https://stackoverflow.com/questions/33180646/rails-4-form-conditional-display-of-fields-based-on-radio-button-selection">Rails 4 form: conditional display of fields based on radio button selection</a></p>

<p>Can anyone see what I need to do to have a form unhide hidden fields based on radio button form selection?</p>

<p>Chrome inspector on the form shows:</p>

<pre><code>&lt;div class="form-group radio_buttons optional project_ethics_relevance"&gt;&lt;label class="radio_buttons optional control-label"&gt;Is a research ethics review relevant?&lt;/label&gt;&lt;span class="radio"&gt;&lt;label for="project_ethics_relevance_true"&gt;&lt;input class="radio_buttons optional" type="radio" value="true" name="project[ethics_relevance]" id="project_ethics_relevance_true"&gt;Yes&lt;/label&gt;&lt;/span&gt;&lt;span class="radio"&gt;&lt;label for="project_ethics_relevance_false"&gt;&lt;input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="project[ethics_relevance]" id="project_ethics_relevance_false"&gt;No&lt;/label&gt;&lt;/span&gt;&lt;/div&gt;
</code></pre>