jQuery在Radio Select上显示Hide Div

Question

我有以下单选按钮。 在页面加载时，我想隐藏所有有序列表。 当我选择年龄为40的收音机时，我想显示列表组1，当我选择值为50的收音机时，我想显示列表组2，而当我选择值60的收音机时，我想显示列表组- 3。 你怎么用jquery做到这一点？

<input type="radio" name="age" value="40">40
<input type="radio" name="age" value="50">50
<input type="radio" name="age" value="60">60



<ol class="list-group-1">
 <li class="line"></li>
<ol>

<ol class="list-group-2">
 <li class="line"></li>
</ol>

<ol class="list-group-3">
 <li class="line"></li>
</ol>

**编辑**

欣赏所有不同的解决方案，但是为什么jquery toggle（）方法不起作用？

最后，这是我使用的：

$(function() {
  $('*[class^="js-toggle-"]').hide();

  var myListRef = {'email':'email','tel':'tel','writing':'writing'}
  $('[name="contact"]').click(function() {
     var $this = $(this);
     $('.js-toggle-' + myListRef[$this.val()]).show();

     $.each( myListRef , function( key, value ) {
         if(value !== $this.val()) {
              $('.js-toggle-' + value).hide();
         }    
      });

  });

 $('#problem').change(function(){
    if($('#problem').val() == 'parcel') {
        $('.js-toggle-problem').show(); 
    } else {
        $('.js-toggle-problem').hide(); 
    } 
  });
});

Answer 1

$(function() {
   $('ol').hide();
    var myListRef = {'40':'1','50':'2','60':3}
   $('[name="age"]').click(function() {
         $('.list-group-' + myListRef[$(this).val()]).show();
   });
});

Answer 2

也许我的解决方案要长一些，这更容易理解发生了什么： http : //jsfiddle.net/xrveLsc8/

CSS：

ol {
    display: none;
}

JS：

$(function() {
    $('input[name="age"]').click(function() {
        var lisGroup = null;

        switch (parseInt($(this).val())) {
            case 40:
                lisGroup = '.list-group-1';
                break;
            case 50:
                lisGroup = '.list-group-2';
                break;
            case 60:
                lisGroup = '.list-group-3';
                break;
        }

        $(lisGroup).show();
    });
});

Answer 3

尝试这个：

 $("ol[class^='list-group-']").hide(); //$(".list-group-1").hide(); //$(".list-group-2").hide(); //$(".list-group-3").hide(); $("input[type=radio]").click(function() { switch(this.value){ case '40': $(".list-group-1").show(); $(".list-group-2").hide(); $(".list-group-3").hide(); break; case '50': $(".list-group-1").hide(); $(".list-group-2").show(); $(".list-group-3").hide(); break; case '60': $(".list-group-1").hide(); $(".list-group-2").hide(); $(".list-group-3").show(); break; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="age" value="40">40 <input type="radio" name="age" value="50">50 <input type="radio" name="age" value="60">60 <ol class="list-group-1"> <li class="line">test 1</li> </ol> <ol class="list-group-2"> <li class="line">test 2</li> </ol> <ol class="list-group-3"> <li class="line">test 3</li> </ol> 

注意：您在评论中询问了在一个jQuery中选择所有<ol>元素的正确语法。 正确的语法是$("ol[class^='list-group-']").hide(); 。 我在上面的演示中使用了它，并注释了三行等效内容。

Answer 4

由于在您的方案中input和ol元素的位置彼此对应，所以最简单的方法是使用index()作为input并使用后者来定位对应的ol 。

$('ol').hide(); // Hide all ol's initially
$('input:radio').click(function()
{
    $('ol').hide(); // Hides all ol's - remove if not needed
    $('ol').eq($(this).index()).show(); - finds the corresponding index of ol and shows it.
});

http://jsfiddle.net/f1sdptm4/1/

这样，您可以添加尽可能多的输入单选按钮组合，而不必重新访问脚本部分。