title: jQuery show / hide div with radio buttons on change & page load
body: <p>Little help if you don't mind.</p>
  
  <p>Basically, I have 3 radio boxes and a div. When the 3rd radio box is selected the div should become visible. However, radio boxes can be checked when the page loads, so if the 3rd box is checked the div needs to be shown, otherwise it should be hidden initially but become visible if the 3rd box is checked later on.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="radio" name="image_location" value="featured_image" /&gt;
  &lt;input type="radio" name="image_location" value="all_images" /&gt;
  &lt;input type="radio" name="image_location" value="custom_field" /&gt;
  
  &lt;div id="image_location_custom_field"&gt;
      ** Content **
  &lt;/div&gt;
  </code></pre>
  
  <p>Where I've got so far with the JavaScript:</p>
  
  <pre><code>jQuery('input[name=image_location]').hide();
  jQuery('input[name=image_location]').change(function() {
    var selected = jQuery(this).val();
    if(selected == 'custom_field'){
        jQuery('#caption_custom_field').show();
    } else {
        jQuery('#caption_custom_field').hide();
    }
  });
  </code></pre>
  
  <p>Many thanks</p>