Question

我有4个单选按钮，我需要根据单击显示一个特定的div，并确保其他3个保持隐藏，等等所有4.我只能找到代码使2工作但不是4。

有没有人有一个例子如何做到这一点？就像我有一个测试

<div id=onestyle=display:none> 1 </div>
<div id=two style=display:none> 2 </div>
<div id=three style=display:none> 3 </div>
<div id=four style=display:none> 4 </div>

但无法找到解决这些问题的事情。

按钮只是现在测试的基础：

<div data-biller="standard" class="membership-plan ">
<label for="option_2624" id="tt-2624">
<input value="12" id="option_2624" name="signup[optionid]" type="radio" checked="checked">
<span class="duration" style="float:left; "><var class="" ref=""> 12<br></span></label>
</div>


<div data-biller="standard" class="membership-plan ">
<label for="option_2429" id="tt-2429">
<input value="6" id="option_2429" name="signup[optionid]" type="radio">
<span class="duration" style="float:left; "><var class="" ref=""> 6 <br></span></label>
</div>


<div data-biller="standard" class="membership-plan ">
<label for="option_1554" id="tt-1554">
<input value="3" id="option_1554" name="signup[optionid]" type="radio" >
<span class="duration" style="float:left; "><var class="" ref=""> 3 <br></span></label>
</div>


<div data-biller="standard" class="membership-plan ">
<label for="option_1697" id="tt-1697">
<input value="1" id="option_1697" name="signup[optionid]" type="radio">
<span class="duration" style="float:left; "><var class="" ref=""> 1<br></span></label>
</div>

Answer 1

您可以通过jQuery执行此操作，如下所示

我为连接到div的广播添加了一个自定义属性，这只会显示每次点击一个div

HTML代码

<div class="my-div me_1" data-target="1">1</div>
<div class="my-div me_2" data-target="2">2</div>
<div class="my-div me_3" data-target="3">3</div>
<div class="my-div me_4" data-target="4">4</div>
<div class="my-div me_5" data-target="5">5</div>

<input type="radio" data-target-id="1" name="radio" class="radioBtn">
<input type="radio" data-target-id="2" name="radio" class="radioBtn">
<input type="radio" data-target-id="3" name="radio" class="radioBtn">
<input type="radio" data-target-id="4" name="radio" class="radioBtn">
<input type="radio" data-target-id="5" name="radio" class="radioBtn">

JS代码

$(document).ready(function(){
     $('.radioBtn').click(function(){

         var target = $(this).data('target-id');
         $('.my-div').hide(); 
         $('.my-div[data-target="'+target+'"]').show();  
     }); 

});

这是一个有效的例子 http://jsfiddle.net/JU7Nw/70

Answer 2

这是一个可以满足您的需求的示例代码。我没有使用任何javascript库，而是使用普通的旧javascript。

<html>
  <head>
    <script type="text/javascript">
        function showDiv (divId)
        {
          var div = document.getElementById (divId);
          var divs = document.getElementsByTagName('div');
          for (var i in divs) 
          {
            divs [i].className = "hidden";
          }
          div.className = "shown";
        }
    </script>
    <style>
        .hidden
        {
            display:none;
        }
        .shown
        {
            display:block;
        }
    </style>
  </head>
  <body>
        <input type="radio" onclick="showDiv ('1')" name="selectme">1</input>
        <input type="radio" onclick="showDiv ('2')" name="selectme">2</input>
        <input type="radio" onclick="showDiv ('3')" name="selectme">3</input>
        <input type="radio" onclick="showDiv ('4')" name="selectme">4</input>

        <div id="1" class="hidden">Hey, its me, 1</div>
        <div id="2" class="hidden">Hey, its me, 2</div>
        <div id="3" class="hidden">Hey, its me, 3</div>
        <div id="4" class="hidden">Hey, its me, 4</div>

  </body>
</html>

多个单选按钮显示/隐藏div

2 个答案: