title: How to show/hide content if a checkbox is checked or not
body: <p>I have some jQuery that will show/hide a hidden div depending on the value that is selected in a dropdown field:</p>
  
  <pre><code>$('.hidden-content-here').hide();
  $('select[name="my_field_name_here"]')
    .on('change', function() {
      var $this = $(this),
          selected = $this.find(':selected').val(),
          options = ['Yes'];
  
      $('.hidden-content-here').hide();
      if(options.indexOf(selected) &gt; -1) {
        $('.my_field_name_here').toggle();
      }
    })
  .trigger('change');
  </code></pre>
  
  <p>And here's the HTML:</p>
  
  <pre><code>&lt;label&gt;Hide/Unhide Hidden Content&lt;/label&gt;
  &lt;select name="my_field_name_here"&gt;
   &lt;option value="No"&gt;No&lt;/option&gt;
   &lt;option value="Yes"&gt;Yes&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="hidden-content-here"&gt;
    &lt;!--Hidden content here--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works fine - if the page loads and the dropdown field already has a value of 'Yes', then the hidden content will be displayed. If the page loads and the dropdown doesn't have a value of 'Yes', then the hidden content won't be displayed. And it will change when different values are selected.</p>
  
  <p>My issue is that I need to change the field from a dropdown to a checkbox, but I can't figure out how to change the jQuery to work with this different type of field instead. The checkbox field will have a value of 'Yes' if it is checked and the HTML will look like this instead:</p>
  
  <p>Hide/Unhide Hidden Content</p>
  
  <p>Thanks for any help with this.</p>