動態檢查單選按鈕的值（重構問題）

Question

我在很大程度上基於這里的例子寫了這個jsfiddle。 這個例子超過2年，所以我想知道是否有一種更簡單的方法來檢查單選按鈕的值，而不是if, elseif, else語句的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

在onLoad中：

$("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代碼更簡單（並且僅取決於name屬性，而不是值）：

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。

你可以在這里測試一下 。

Answer 3

你是這個意思嗎？

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

就像是

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