title: Show rest of form if checkbox is checked
body: <p>I reviewed a couple of different SO answers (<a href="https://stackoverflow.com/questions/10322444/show-rest-of-a-form-if-a-checkbox-is-ckecked-in-ruby-on-rails">show rest of a form if a checkbox is ckecked in ruby on rails</a>), but none have worked for me.</p>
  
  <p>There are other answers, but I'm not sophisticated at jQuery or JS, and the rest are very hypothetical. In either case, I've followed the example answers on the linked question perfectly, but still, when the checkbox is checked, the rest of the form is not appearing.</p>
  
  <p>Thoughts?</p>
  
  <p>Body</p>
  
  <pre><code>      &lt;div class="form-group" id="checkbox"&gt;
          &lt;%= f.check_box :paydeliver %&gt;
          &lt;%= f.label :paydeliver, "Pay $25" %&gt;
        &lt;/div&gt;
  
        &lt;div id="delivery" style="display:none;"&gt;
          &lt;div class="form-group"&gt;
            &lt;%= f.label :addysdeliver, "Delivery address"%&gt;
            &lt;%= f.text_field :addysdeliver, class: "form-control"%&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;%= f.submit "Go!", class: "btn btn-primary btn-large btn-block" %&gt;
  
        &lt;% end %&gt; #end of form
  </code></pre>
  
  <p>Scripts that I have tried (from linked SO answer)and have failed... Feel free to improve on any or all of them!</p>
  
  <pre><code>&lt;script&gt;
  window.onload = function() { 
   var checkbox = document.getElementById('checkbox');
   if (checkbox.checked) {
   document.getElementById("delivery").style.display = "block";
   } else {
   document.getElementById("delivery").style.display = "none";
   }
  };
  </code></pre>
  
  <h2>    </h2>
  
  <pre><code>&lt;script&gt;
  window.onload = function() { 
  var checkbox = document.getElementById('checkbox');
  var delivery_div = document.getElementById('delivery');
  checkbox.change = function() {
     if(this.checked) {
       delivery_div.style['display'] = 'block';
     } else {
       delivery_div.style['display'] = 'none';
     }
  };
  </code></pre>
  
  <h2>    </h2>
  
  <pre><code>&lt;script&gt;
  $('select#paydeliver').change -&gt;
    if $(this).val() == 'true'
      $('delivery').slideDown('fast')
    else
      $('delivery').slideUp('fast')
  </code></pre>
  
  <h2>    </h2>
  
  <pre><code>&lt;script&gt;
  $("input[type='checkbox']#paydeliver").on('change', function(){
  $('delivery').toggle();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Note that for each method above, I also tried adding a # symbol in front of the ID element, for example ('#delivery') instead of ('delivery'). Still no luck!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>@emilioicai definitely got the answer to the question right, but in doing so, also made me realize something more complex. Per controller, right after this form is posted, users are redirected to the edit view, so that if they wish, they can make changes. All the data in the form that they just entered persists into the edit view (included the checked box) except the field that is supposed to appear if the box is checked.</p>
  
  <p>This is why I was trying to change if (condition) in JS to be based on whether or not the checked box was showing "True" rather than having it just be checked. Additional thoughts appreciated!</p>