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

我在很大程度上基于这里的例子写了这个jsfiddle。 这个例子超过2年，所以我想知道是否有一种更简单的方法来检查单选按钮的值，而不是if, elseif, else语句的if, elseif, else 。 我的价值观将被disabled, both, footer, header ，只有四个不太糟糕。 我只是想学习如何编写更好的Javascript。

HTML：

  1  2  3 
 Div 1 Content
 
 Div 2 Content
 
 Div 3 Content 

使用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：

 
 What to show? 
  Disabled  Both  Header  Footer 
 This is the main content div of all the options 
Custom Header:
  Custom Header Code
 
Custom Footer:
 Custom Footer Code 

新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选择器，而不是将单选按钮的值设置为某些魔术名称。

例如：

  Disabled  Both  Header  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

就像是