动态检查单选按钮的值（重构问题）

Question

我主要基于示例 found here 编写了这个 jsfiddle。这个例子已经超过 2 年了，所以我想知道是否有比 if, elseif, else 语句更简单的方法来检查单选按钮的值。我的价值观将是disabled, both, footer, header，所以只有四个还不错。我只是想学习如何编写更好的 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：http://www.jsfiddle.net/bs54j/1/

更新：修改问题
所以我在意识到我实际上会做什么之前发布了这个，所以这里是我正在使用的实际代码的更新小提琴：http://jsfiddle.net/BandonRandon/BsupQ/3/

新建 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>

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

可能需要重构的最重要的事情是加载时的显示/隐藏我觉得我在那里有大量额外的废话代码。我不是在寻找讲义，只是关于如何使这项工作更好/更快/更强的建议。

Answer 1

在加载中：

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

JSFiddle

---

更新

我建议使用switch:

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

Answer 2

我认为通过在 html 方面进行一些重构，您可以使其更简单、更通用。

不要将单选按钮的值设置为一些神奇的名称，而应该将要使用的 jQuery 选择器放入其中。

例如：

<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

这样 javascript 代码更简单（并且仅取决于名称属性，而不是值）：

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

当然，您始终可以将 show_all 类型的输入设为隐藏（如果您不想要显示全部的单选按钮）。您甚至可以在其中包含一些用于烦人的广告等的选择器。

确实，现在我们将一些逻辑移到了 html 中，但我认为只需要在一个地方进行更改的好处要大得多。

现在，如果您想添加新的 div 或单选按钮，您只需更改 html。

你可以测试一下here。

Answer 3

这是你的意思吗？

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

类似

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