0

私は4つのラジオボタンを持っており、クリックされたものに基づいて特定のdivを表示し、他の3つが非表示のままであることを確認する必要があります。

誰かがこれを行う方法の例を持っていますか？私が持っているテストと同じように

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

2 に答える 2

2

次のようにjQueryでこれを行うことができます

div に接続されているラジオにカスタム属性を追加しました。これにより、クリックごとに 1 つの 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 に答える