javascript - 如何在选中单选按钮的基础上显示div？

Question

我写了如下代码行的 html:

         <input type="radio" runat="server" id="radioImg" value="Image" text="Image"/>  
        <input type="radio" runat="server" id="radioVideo" value="Video" text="Video" />  
                  <div ID="pnlImgSlider1" Style="display:none;>
                   </div>
                  <div ID="pnlVideoSlider1" Style="display:none;>
                   </div>

现在我希望，如果选择了 radioImg，则应显示 pnlImgSlider1，如果选中了 radioVideo，则应显示 pnlVideoSlider1。请帮助我!

Answer 1

只需将一些 name 分配给您的 radio 按钮并捕获 change 事件，如下所示:

$('input[name="commonrad"]').on('change',function(){
  if($(this).attr('value')=="Image")
  {
     $('#pnlImgSlider1').show()
     $('#pnlVideoSlider1').hide()
  }
  else
  {
     $('#pnlImgSlider1').hide()
     $('#pnlVideoSlider1').show()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="commonrad" runat="server" id="radioImg" value="Image" text="Image"/>  
<input type="radio" name="commonrad" runat="server" id="radioVideo" value="Video" text="Video" />  
<div ID="pnlImgSlider1" style="display:none;">
  Image Slider
</div>
<div ID="pnlVideoSlider1" style="display:none;">
  Video Slider
</div>