0

I have 4 radio buttons and I need to show a specific div based on which is clicked and make sure the other 3 remain hidden, etc for all 4. I can only find code to make 2 work but not 4.

Does anyone have an example how to do this? Just as a test I have

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

but cannot find something to sort out doing it with all of them.

Buttons are just basic in place to test right now:

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

2 回答 2

2

您可以通过 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

于 2013-02-01T18:15:09.627 回答
0

这是一个示例代码，可以满足您的需求。我没有使用任何 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>
于 2013-02-01T18:19:30.807 回答