Question

Little help if you don’t mind.

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.

HTML:

<input type="radio" name="image_location" value="featured_image" />
<input type="radio" name="image_location" value="all_images" />
<input type="radio" name="image_location" value="custom_field" />

<div id="image_location_custom_field">
    ** Content **
</div>

Where I’ve got so far with the JavaScript:

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();
  }
});

Many thanks

Answer 1

just check if the radiobutton is checked an show the div, you can also use css to hide the div

<input type="radio" name="image_location" value="featured_image" />
<input type="radio" name="image_location" value="all_images" />
<input type="radio" name="image_location" value="custom_field" />

<div style="display:none" id="image_location_custom_field">
    ** Content **
</div>​
//on dom ready
if (jQuery('input[value=custom_field]:checked').length > 0){
    jQuery('#image_location_custom_field').show()
}
else {
    jQuery('#image_location_custom_field').hide();
}
jQuery('input[name=image_location]').change(function() {
  var selected = jQuery(this).val();console.log(selected);
  if(selected == 'custom_field'){
      jQuery('#image_location_custom_field').show();
  } else {
      jQuery('#image_location_custom_field').hide();
  }
});

W/O check FIDDLE
with check FIDDLE