Dynamically checking the value of a radio button (refactoring question)

Question

I wrote this jsfiddle based largely on the example found here. The example is over 2 years old so I was wondering if there is an easier way to check the value of a radio button than gobs of if, elseif, else statements. My values are going to be disabled, both, footer, header so with only four not too bad. I'm just trying to learn how to write better Javascript.

Html:

<input type="radio" name="rdio" value="1" checked="checked" /> 1
<input type="radio" name="rdio" value="2" /> 2
<input type="radio" name="rdio" value="3" /> 3
<div id="div_1"> Div 1 Content</div>
<div id="div_2"> Div 2 Content</div>
<div id="div_3"> Div 3 Content</div>

Javascript:

$('#div_1,#div_2,#div_3').css('display','none');
$("input[name=rdio]").change(function() {
    if ($("input[name=rdio]:checked").val() == '1') {
        $('#div_1').show();
        $('#div_2,#div_3').hide();

    }
    else if ($("input[name='rdio']:checked").val() == '2') {
        $('#div_2').show();
        $('#div_1,#div_3').hide();
    }
    else {
        $('#div_3').show();
        $('#div_2,#div_1').hide();
    }

    });

JSFiddle to play around with: http://www.jsfiddle.net/bs54j/1/

UPDATE: To revise question
So I posted this before realizing what I would actually be doing so here is an updated fiddle with the actual code I'm using: http://jsfiddle.net/BandonRandon/BsupQ/3/

New Html:

<h2> What to show? </h2>
<input type="radio" name="show_custom_header_footer" value="disabled" checked="checked" /> Disabled
<input type="radio" name="show_custom_header_footer" value="both" /> Both
<input type="radio" checked name="show_custom_header_footer" value="header" /> Header
<input type="radio" name="show_custom_header_footer" value="footer" /> Footer
   <div id="header_footer_options">
       This is the main content div of all the options
       <p id="custom_header">Custom Header:<br/> <textarea rows="2" cols="100" name="custom_header"> Custom Header Code</textarea></p>

       <p id="custom_footer">Custom Footer:<br/> <textarea rows="2" cols="100" name="custom_footer">Custom Footer Code</textarea></p></div>

New Javascript:

 //show hide custom header/footer depending on settings
$('#header_footer_options').hide();
//check status on change
$("input[name='show_custom_header_footer']").change(function() {
    if ($("input[name='show_custom_header_footer']:checked").val() == 'disabled') {
        $('#header_footer_options').fadeOut(500);
    }
    else if ($("input[name='show_custom_header_footer']:checked").val() == 'both') {

        $('#header_footer_options').fadeIn();
        $('#custom_header,#custom_footer').fadeIn();
    }
    else if ($("input[name='show_custom_header_footer']:checked").val() == 'header') {
        $('#header_footer_options').fadeIn();
        $('#custom_header').fadeIn();
        $('#custom_footer').hide();
    }
    else if ($("input[name='show_custom_header_footer']:checked").val() == 'footer') {
        $('#header_footer_options').fadeIn();
        $('#custom_footer').fadeIn();
        $('#custom_header').hide();

    }
    else {
        $('#header_footer_options').hide();
    }
});
//check status on page load
if ($("input[name='show_custom_header_footer']:checked").val() == 'disabled') {
    $('#header_footer_options').hide();
}
else if ($("input[name='show_custom_header_footer']:checked").val() == 'both') {

    $('#header_footer_options').show();
    $('#custom_header,#custom_footer').show();
}
else if ($("input[name='show_custom_header_footer']:checked").val() == 'header') {
    $('#header_footer_options').show();
    $('#custom_header').show();
    $('#custom_footer').hide();
}
else if ($("input[name='show_custom_header_footer']:checked").val() == 'footer') {
    $('#header_footer_options').show();
    $('#custom_footer').show();
    $('#custom_header').hide();

}
else {
    $('#header_footer_options').hide();
} 

Probably the biggest thing that needs to be refactored is the show/hide on load I feel like I have a ton of extra crap code in there. I'm not looking for a handout just a suggestion on how to make this work better/faster/stronger.

Answer 1

In onLoad:

$("input[name=rdio]").change(function(){
    $('#div_1,#div_2,#div_3').hide();
    $('#div_' + $("input[name=rdio]:checked").val()).show();
    }).change();

JSFiddle

---

Update

I would suggest using switch:

switch ($("input[name=rdio]:checked").val()) {
  case 'disabled':
     ...
     break;
  case 'both':
     ...
     break;
}

Answer 2

Is this what you mean?

http://daxpanganiban.com/javascript/get-value-of-radio-button-using-jquery

something like

<input type="radio" name="sample" value="2" checked="checked" />

Answer 3

I think that with a bit of refactoring on the html side you can make it simpler and more generic.

Instead of setting the value of the radio button to some magic names, you should put in it the jQuery selector you want to use.

For example:

<input type="radio" name="show_custom_header_footer" value="" checked="checked" /> Disabled
<input type="radio" id="show_all" name="show_custom_header_footer" value="#custom_header,#custom_footer" /> Both
<input type="radio" name="show_custom_header_footer" value="#custom_header" /> Header
<input type="radio" name="show_custom_header_footer" value="#custom_footer" /> Footer

This way the javascript code is simpler (and depends only on the name attribute, not the values):

var $all = $($('#show_all').val());
$('input[name=show_custom_header_footer]').change(function(){
    var $show = $(this.value).show();
    $all.not($show).hide();
});
//initial setup:
$all.not($('input[name=show_custom_header_footer]:checked').val()).hide();

Of course you can allways make the show_all input of type hidden (if you don't want a radio button that shows all). You can even include in it some selectors for annoying ads etc.

It's true that now we moved some logic to the html, but I think the benefit of having to change things in only one place is much bigger.

Now if you want to add a new div or radio button you have to change only the html.

You can test it here.