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/

這樣，您可以添加盡可能多的輸入單選按鈕組合，而不必重新訪問腳本部分。