How to display div on the basis of radio button checked?

Question

I have written html like below lines of code:

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

Now I want that if radioImg is selected then pnlImgSlider1 should be displayed and if radioVideo is checked then pnlVideoSlider1 should be displayed. Please help me!

Answer 1

Try this solution, am added data-target,name and class atrribute into HTML structure below:

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

And js should be :

$('[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

Answer 2

$(':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();
  }
})

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

First add name to the radio button so that only one will be selected. Then create an event change in the event change check if the radio button that is checked has the ID specified and if it checked then if the condition is met show the specified div and hide the other div

Answer 3

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

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

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

I've implemented the solution for you. Try the following code but improve it to suit your needs.

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

The following is the fiddle of my implementation.

Fiddle

Answer 5

Just assign some name to your radio button and capture on change event of the same as below:

$('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>

Answer 6

$('#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')
      });
    });