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

});

Enthrone

tl;dr.. you will probably get more responses if you boil down your question to the basics – Synapse

Makes sense to do that - thanks, I have updated it. – Enthrone

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.

Phobia

Hi @Bryan so I added in that last part and it does appear to hide the .main_link areas (which is great!) but, if I do decide to click on the Static option (which would then open up the mainImageLinkHandleSelection() function, if a radio button was selected like wp_pages the input box for this is hidden by default, instead of being shown - so, a user has to re-click on the selected option for it to show up instead of the mainImageLinkHandleSelection() handling this. Here is what I have for my complete code at the moment (the bottom portion changed): jsfiddle.net/ebBPb Thanks! – Enthrone

Some HTML would definitely help – Phobia

Hi @Bryan - sure (sorry about that), here ya go jsfiddle.net/d5aYb So you'll see the Slideshow radio option is selected by default and it hides anything that the Static option would show, but when you select Static you'll see some link options that show up (in a radio list) and even though the External Link option is shown (and should have a corresponding text box show up) it is not until you select it again that the box appears correctly. Thanks! – Enthrone

It took me a while to actually figure out what the heck you were trying to accomplish with your HTML, but I finally got through it. I'll amend my answer again :) – Phobia

I honestly don't know what to say... such a HUGE help! Definitely some stuff in there that I need to read up on, as I can write some jQuery, but obviously not very efficiently :) Takin this to a whole new level for me, I can't thank you enough! – Enthrone