jQuery - Check current state of radio button and hide div

Question

QUESTION: How would I check the value of a radio button onload and if it is a certain value, perform an action based up on that? Referenced at the end of my code in the if statement.

MORE IN-DEPTH EXPLANATION

So I know the title of this might sound familiar to other questions, but I have a bit more involved and trying to see the best way to approach it. So, in my function homepageDisplayHandleSelection() I hide/show areas based on the selection of radio buttons from within that .homepage_display area. Then, I basically use that same functionality for another group of radio buttons within it called mainImageLinkHandleSelection and then hides/shows areas based on the selection. I can switch between the Static and Slide option just fine, but the initial view (if Slideshow is selected when the page loads) is that it is still showing the secondary radio buttons mainImageLinkHandleSelection and it is not until I click off of the Slideshow option and back to Static that it corrects itself.

So, I attempted to fix this (at the bottom of the example code) by creating a check if the current radio value that is checked is slideshow and if so, I hide a div called main_link (which is also attached to each of the areas around the mainImageLinkHandleSelection divs). I know my question has bunch of parts in it, but I figured if anyone could help, there'd be a genius out there somewhere ;) Thank you very much for any and all help!

jQuery(document).ready(function() {

    // Homepage Settings - Homepage Display
    // This function handles the radio clicks.
    function homepageDisplayHandleSelection() {
        var duration = 400;
        jQuery('.homepage_display').hide(duration);
        jQuery('.main_link').hide(duration);
        if (this.value === "slideshow") {
          jQuery('.homepage_display_slides').show(duration);     
        } else if (this.value === "static") {
          jQuery('.homepage_display_static').show(duration);     
        }
    }

    // Attach a click handler to the radios
    // and trigger the selected radio
    jQuery('#section-of_homepage_display :radio')
        .click(homepageDisplayHandleSelection)
        .filter(':checked').trigger('click');

    // Homepage Settings - Main Link Options
    // This function handles the radio clicks.
    function mainImageLinkHandleSelection() {
        var duration = 400;
        jQuery('.main_link').hide(duration);
        if (this.value === "external_url") {
          jQuery('.main_link_external').show(duration);     
        } else if (this.value === "wp_page") {
          jQuery('.main_link_page').show(duration);     
        }
          else if (this.value === "wp_post") {
          jQuery('.main_link_post').show(duration);     
        }
          else if (this.value === "wp_taxonomy") {
          jQuery('.main_link_category').show(duration);     
        }
    }

    // Attach a click handler to the radios
    // and trigger the selected radio
    jQuery("#section-of_main_image_link_option :radio")
        .click(mainImageLinkHandleSelection)
        .filter(":checked").trigger("click");


  // Make sure main image link option are hidden by default if slideshow option is selected
    if (jQuery('#section-of_homepage_display :radio :checked').val() === 'slideshow') {
      jQuery('.main_link').hide();
    }

});

Answer 1

Well, I'm assuming that each radio button has a unique value, and they are all given the same name. In that case, what you want is the :checked selector:

var $selected = $('input[name="RadioGroup"]:checked', '#someform');
if($selected.length == 0) {
   // None is selected
} else {
   var whichOne = $selected.val();
   // do stuff here
}

That will get you the value of the currently selected radio button. If you already have the id of the radio button you want to check, then it's as simple as:

$('#someradiobutton').is(':checked') // returns true if checked, else false

Specifically, since you specifically want to check on the slideshow value, I believe your if statement will become:

if (jQuery('input[name="mainImageLinkHandleSelection"][value="display"]', '#section-of_homepage_display').is(':checked')) {
  jQuery('.main_link').hide();
}

EDIT: I see your issue now. The problem is that you hide all the .main_link elements, as well as the .homepage_display elements. But when you click on the homepage selection radio button, you don't then go through and re-display the .main_link element that is reflected by the yhlumberyardstraditional3[of_main_image_link_option] radio button group.

Two things:

1. Use the change event handler instead of click. This will prevent the whole animation sequence from needlessly running when an already selected radio button is clicked.
2. When an element is shown, you'll need to see if any radio buttons are checked and then trigger the change event handler for those radio buttons.

I've gone ahead an updated your fiddle with a proof-of-concept. The main change is as follows:

var toShow = null;
if (this.value === "slideshow") {
  toShow = '.homepage_display_slides';
} else if (this.value === "static") {
  toShow = '.homepage_display_static';
}

if(toShow) {
    jQuery(toShow).show(duration);
    // If we just showed any checked radio buttons, let's re-trigger
    // them so they can update their groups and such
    jQuery('input:checked:visible', toShow).trigger('change');
}

I also took the liberty of generalizing the problem and shrunk the code down to 39 lines. Check it out here.