Question

我有以下单选按钮。在页面加载时，我想隐藏所有有序列表。当我选择值为40的无线电时，我想显示list-group-1，当我选择值为50的无线电时，我想显示list-group-2，当我选择值为60的无线电时，我想显示list-group- 3。你怎么能用jquery做到这一点？

pip3.4

**编辑**

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

最后这是我使用的：

<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>

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

试试这个：

＆＃13;

$("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;
  }
});

＆＃13;

<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>

＆＃13;

注意：您在评论中询问了在一个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/

使用此功能，您可以添加任意数量的输入单选按钮组合，而无需重新访问脚本部分。

Jquery在Radio Select上显示Hide Div

4 个答案: