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

$('#radioImg').on('click',function(){
      $('#pnlImgSlider1').show();
      $('#pnlVideoSlider1').hide();
    });

$('#radioVideo').on('click',function(){
      $('#pnlVideoSlider1').show();
      $('#pnlImgSlider1').hide();
    });

OR：

    $('#radioVideo').on('click',function(){
       $('#pnlVideoSlider1').fadeIn('fast',function(){
      $('#pnlImgSlider1').fadeOut('fast')
    });
    });    


$('#radioImg').on('click',function(){
       $('#pnlImgSlider1').fadeIn('fast',function(){
         $('#pnlVideoSlider1').fadeOut('fast')
       });
    });

    $('#radioVideo').on('click',function(){
       $('#pnlVideoSlider1').fadeIn('fast',function(){
         $('#pnlImgSlider1').fadeOut('fast')
      });
    });

Answer 2

只需将name分配给radio按钮，然后捕获与change相同的事件：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

$(function(){
    $('input:radio').change(function(){
        if($(this).val() =="Image") {
            $("#pnlImgSlider1").show();
            $("#pnlVideoSlider1").hide();
        }
        else {
            $("#pnlVideoSlider1").show();
            $("#pnlImgSlider1").hide();
        } 
    }); 
});

＆＃13;

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

＆＃13;

HTML

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

Javasript

$(function(){
    $('input:radio').change(function(){
        if($(this).val() =="Image") {
            $("#pnlImgSlider1").show();
            $("#pnlVideoSlider1").hide();
        }
        else {
            $("#pnlVideoSlider1").show();
            $("#pnlImgSlider1").hide();
        } 
    }); 
});

JSFIFFDLE

Answer 4

我已经为您实施了解决方案。请尝试以下代码，但要根据您的需要进行改进。

<input type="radio" runat="server" name="radio" id="radioImg" value="Image" text="Image" />
<input type="radio" runat="server" name="radio" id="radioVideo" value="Video" text="Video" />
<div class='content' ID="pnlImgSlider1" ></div>
<div class='content' ID="pnlVideoSlider1"></div>

$('input[type=radio]').click(function(){
    if($(this).is(':checked')){
        $('.content').hide();
        if($(this).attr('id') == 'radioImg'){
            $('#pnlImgSlider1').show();
        }else if($(this).attr('id') == 'radioVideo'){
            $('#pnlVideoSlider1').show();
        }
    }
})

#pnlImgSlider1{
    width:50px;
    height:50px;
    background-color:red;
    display:none;
}
#pnlVideoSlider1{
    width:50px;
    height:50px;
    background-color:blue;
    display:none;
}

以下是我实施的小提琴。

Fiddle

Answer 5

＆＃13;

$(':radio').change(function() {

  var id = $(this).attr('id')
  console.log(id);
  if (id == 'radioImg' && $(this).is(':checked')) {
    $('#pnlImgSlider1').show();
    $('#pnlVideoSlider1').hide();
  }
  if (id == 'radioVideo' && $(this).is(':checked')) {
    $('#pnlImgSlider1').hide();
    $('#pnlVideoSlider1').show();
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" runat="server" name='radio' id="radioImg" value="Image" text="Image" />
<input type="radio" runat="server" name='radio' id="radioVideo" value="Video" text="Video" />
<div id="pnlImgSlider1" Style="display:none">
  image
</div>
<div id="pnlVideoSlider1" Style="display:none">
  video
</div>

＆＃13;

首先将name添加到单选按钮，以便只选择一个。然后在事件更改检查中创建一个事件更改，如果选中的单选按钮是否指定了ID，如果已检查则是否满足条件显示指定的div并隐藏另一个div

Answer 6

尝试此解决方案，将data-target，name和class atrribute添加到以下HTML结构中：

<input type="radio" runat="server" id="radioImg" value="Image" text="Image" data-target="pnlImgSlider1" name="radioslider"/>a
<input type="radio" runat="server" id="radioVideo" value="Video" text="Video" data-target="pnlVideoSlider1" name="radioslider"/>b
<div ID="pnlImgSlider1" Style="display:none;" class="slider">aa</div>
<div ID="pnlVideoSlider1" Style="display:none;" class="slider">bb</div>

js应该是：

$('[name="radioslider"]').click(function () {
  // get target element
  var target = $(this).data('target');
  // hide all slider class at first
  $('.slider').css('display', 'none');
  // show only respective div
  $('#' + target).css('display', 'block');
});

DEMO

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

6 个答案: