Vérification dynamique de la valeur d'un bouton radio (question de refactorisation)

Question

J'ai écrit ce jsfiddle en me basant principalement sur l'exemple found here. L'exemple a plus de 2 ans, donc je me demandais s'il y avait un moyen plus facile de vérifier la valeur d'un bouton radio que des gobs de if, elseif, else instructions. Mes valeurs vont être disabled, both, footer, header donc avec seulement quatre pas trop mal. J'essaie juste d'apprendre à mieux écrire 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 à jouer avec: http://www.jsfiddle.net/bs54j/1/

MISE À JOUR: Pour réviser question
Je posté avant de réaliser ce que je serait en fait le faire ici est un violon mis à jour avec th e code réel J'utilise: http://jsfiddle.net/BandonRandon/BsupQ/3/

Nouveau 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> 

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

probablement la plus grande chose qui doit être refondus est le spectacle/cacher la charge I se sentir comme j'ai une tonne de code de la merde supplémentaire là-bas. Je ne cherche pas un document juste une suggestion sur la façon de faire ce travail mieux/plus vite/plus fort.

Answer 1

En onLoad:

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

JSFiddle

---

Mise à jour

Je suggère d'utiliser switch:

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

Answer 2

Est-ce ce que vous voulez dire?

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

quelque chose comme

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

Answer 3

Je pense qu'avec un peu de refactoring du côté html, vous pouvez le rendre plus simple et plus générique. Au lieu de définir la valeur du bouton radio sur certains noms magiques, vous devez utiliser le sélecteur jQuery que vous souhaitez utiliser.

Par exemple:

<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 

De cette façon, le code javascript est plus simple (et ne dépend que de l'attribut name, pas les valeurs):

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

Bien sûr, vous pouvez AllWays faire le show_all entrée de type caché (si vous ne voulez pas un bouton radio qui montre tout). Vous pouvez même y inclure des sélecteurs pour les publicités ennuyeuses, etc.

Il est vrai que maintenant nous avons déplacé une certaine logique vers le html, mais je pense que l'avantage de devoir changer les choses en un seul endroit est beaucoup plus grand. Maintenant, si vous voulez ajouter un nouveau div ou un bouton radio, vous devez seulement changer le code HTML. Vous pouvez le tester here.