Question

我在很大程度上基于示例found here编写了这个jsfiddle。这个例子超过2年，所以我想知道是否有一种更简单的方法来检查单选按钮的值而不是gob 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。

您可以对其进行测试here。

Answer 3

这是你的意思吗？

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

类似

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

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

3 个答案: