如果选择了单选按钮 Show Div - 8 Radio Buttons / 8 Divs - 这可以简化吗？答案

【问题标题】：If Radio Button is Selected Show Div - 8 Radio Buttons / 8 Divs - Can this be simplified?如果选择了单选按钮 Show Div - 8 Radio Buttons / 8 Divs - 这可以简化吗？
【发布时间】：2013-09-10 10:22:09
【问题描述】：

基本上，我想要 8 个单选按钮。如果选择了一个单选按钮，则下面会显示一个 div。如果选择了另一个按钮，则会显示另一个 div。一次只显示一个 div，如果（最初）没有选择按钮，则不会显示 div。

这是我的 HTML，它是相当标准的，我并没有尝试改进它以满足我的需要。

<form id='group'>
    <label><input type="radio" name="group1" class="sim-micro-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mini-btn"/></label> 
    <label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mega-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>

<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop">sim-micro</div>
    <div class="sim-mini-desktop">sim-mini</div>
    <div class="sim-maxi-desktop">sim-maxi</div>
    <div class="sim-mega-desktop">sim-mega</div>
    <div class="phone-smart-micro-desktop">phone-smart-micro</div>
    <div class="phone-smart-mini-desktop">phone-smart-mini</div>
    <div class="phone-smart-desktop">phone-smart</div>
    <div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>

然而，这是我的脚本，它看起来相当忙碌，我想知道在我继续之前有没有办法更简单地做到这一点？

$(document).ready(function(){
    $('.sim-micro-desktop').hide();
    $('.sim-mini-desktop').hide();
    $('.sim-maxi-desktop').hide();
    $('.sim-mega-desktop').hide();
    $('.phone-smart-micro-desktop').hide();
    $('.phone-smart-mini-desktop').hide();
    $('.phone-smart-desktop').hide();
    $('.phone-smart-maxi-desktop').hide();


    $('form#group').click(function(){
        if($('.sim-micro-btn').is(":checked")){
            $('.sim-micro-desktop').show();
        } else {
            $('.sim-micro-desktop').hide();
        }     

        if($('.sim-mini-btn').is(":checked")){
            $('.sim-mini-desktop').show();
        } else {
            $('.sim-mini-desktop').hide();
        }     

        if($('.sim-maxi-btn').is(":checked")){
            $('.sim-maxi-desktop').show();
        } else {
            $('.sim-maxi-desktop').hide();
        }  

        if($('.sim-mega-btn').is(":checked")){
            $('.sim-mega-desktop').show();
        } else {
            $('.sim-mega-desktop').hide();
        }  

        if($('.phone-smart-micro-btn').is(":checked")){
            $('.phone-smart-micro-desktop').show();
        } else {
            $('.phone-smart-micro-desktop').hide();
        }  

        if($('.phone-smart-mini-btn').is(":checked")){
            $('.phone-smart-mini-desktop').show();
        } else {
            $('.phone-smart-mini-desktop').hide();
        }  

        if($('.phone-smart-btn').is(":checked")){
            $('.phone-smart-desktop').show();
        } else {
            $('.phone-smart-desktop').hide();
        }  

        if($('.phone-smart-maxi-btn').is(":checked")){
            $('.phone-smart-maxi-desktop').show();
        } else {
            $('.phone-smart-maxi-desktop').hide();
        }  

          });


});

【问题讨论】：

标签： javascript jquery html button radio

【解决方案1】：

首先将共享类放在radio 按钮和显示内容的div 元素上。在我的示例中，我分别使用了trigger 和content。然后将data 属性添加到收音机中，以确定单击时应显示哪个div。

缩短示例：

<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
</form>
<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
</div>

那么你只需要 1 个这样的点击处理程序：

$(document).ready(function(){
    $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();
    });
});

您也可以在不使用 jQuery 的情况下使用 CSS 隐藏 div 元素 - 无论如何都应该在 CSS 中完成样式设置，因为这样可以更好地分离关注点。

.content {
    display: none;
}

Example fiddle

【讨论】：

非常感谢。当我看到它被写下来但需要帮助才能看到它时，这是有道理的。谢谢！
伙计，如果我为所有隐藏的输入插入值（我将 div 更改为输入类型文本），这些值会发送到数据库吗？我想如果它们被隐藏，那么这些值不会发送到数据库。你能给我澄清一下吗？谢谢。
如果您不希望将input 的值与其他表单POST 数据一起发送到服务器，请在其上设置disabled="disabled" 属性。

【解决方案2】：

您可以使用选择器来减少这里的代码行数。

$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();

可以简写为：

$('.billpay-internet-add-ons div').hide();

这使用父元素对您要隐藏的元素进行分组，而不是对每个元素重复请求。

同样，您可以使用命名约定将项目映射到要显示和隐藏的元素 - 这是完整的工作示例：

$(document).ready(function(){
    $('.billpay-internet-add-ons div').hide();

    $('form#group').click(function(){
        $('#group input').each(function() {
            var item = $(this);
            var isChecked = item.is(':checked');
            var name = item.attr('class').replace("-btn", "-desktop");

            if (isChecked) {
                $('.' + name).show();
            } else {
                $('.' + name).hide();
            }
        });
    });
});

此示例纯粹基于您的 HTML，没有任何更改。 See it working here.

如果您不需要转换名称，则可以进一步简化此操作。您可以使用数据属性而不是更改类名来执行此操作。

【讨论】：

【解决方案3】：

使用 html5 数据属性）（即 data-mappingclass ）指向您需要显示的相应 div。为所有单选按钮添加相同的类（即radioClass）。

HTML

 <label><input type="radio" name="group1" class="radioClass sim-micro-btn" data-mappingclass="sim-micro-desktop"/></label>
 <label><input type="radio" name="group1" class="radioClass sim-mini-btn" data-mappingclass="sim-mini-desktop"/></label>
 ... //same for others

JS

$('.radioClass').click(function() {
  $('.billpay-internet-add-ons div').hide();
  if(this.checked){
     $('.' + $(this).data('mappingclass').show();
  }
});

【讨论】：

【解决方案4】：

您可以首先使用 CSS 将所有内容默认隐藏（可能除了一种形式），这样就可以摆脱这个：

$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();

这对没有 javascript 的用户有负面影响，如果您担心的话 - 他们将永远无法看到其他表单。

接下来，只能检查一个无线电，所以只需找出它正在使用的无线电：

$('input[name=group1]:checked);

但是你为什么要这样做，所以你让收音机有一个更像是点击处理程序：

$('#group input[type="radio"').click(function(){
    //code to show/hide form
});

现在您可以选择如何将单选按钮链接到不同的表单，一种方法是使用 data 属性，因此您可以像这样定义单选：

<label><input type="radio" name="group1" class="phone-smart-maxi-btn" data-form="phone-smart-maxi-desktop"/></label>

你可以这样访问：

$('input[name=group1]:checked).data("form");

现在您需要做的就是隐藏已经显示的 div，但这可以通过类似使用 data 属性或使用 :visible 选择器来实现。

【讨论】：

【解决方案5】：

您可以使用 CSS 隐藏 div 元素：

.billpay-internet-add-ons div {
  display: none;
}

然后您可以使用target 的className 来确定要显示哪些div，隐藏所有sibling 元素：

$('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});

Here's a fiddle

【讨论】：

【解决方案6】：

var $billpay= $('.billpay-internet-add-ons');
$billpay.find("div").hide();
$("#group input:radio").click(function(){
  $billpay.find("div").hide();
  $billpay.find("div:eq("+$(this).parent().index()+")").show();    
});

http://jsfiddle.net/KaF77/2/

【讨论】：

【解决方案7】：

我把它简化了四个你。基本上，您查看收音机单击的索引，然后显示具有相同索引的 div。所以 div 的位置必须与收音机相匹配。

你的 HTML 和以前一样。

你的 CSS：

.billpay-internet-add-ons > div {
    display:none;
}

你所有的 Javascript：

$(document).ready(function(){
    $('form#group').click(function(e)
    {
        $('.billpay-internet-add-ons > div').hide();
        $('form#group input[type="radio"]').each(function(index)
        {
            if($(this).is(':checked'))
            {
                $('.billpay-internet-add-ons > div:eq(' + index + ')').show();
            }
        });
    });
});

jsFiddle 演示：http://jsfiddle.net/cfSXY/

【讨论】：