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

Question

我有 4 个单选按钮，我需要根据单击的按钮显示一个特定的 div，并确保其他 3 个单选按钮保持隐藏状态，等等。我只能找到使 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 的 radio 添加了一个自定义属性，每次点击只会显示一个 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