根据jQuery中的单选按钮选择显示和隐藏内容

Question

I am trying to display different contents base on radio button select in jquery.

My HTML is something like this:

<div class="col-sm-5">
  <label class="radio-inline">
    <input type="radio" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ?  ' checked' : ''?>> Person
  </label>
  <label class="radio-inline">
    <input type="radio" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ?  ' checked' : ''?>> Institute
  </label>
</div>

This is how I tried in jquery to display two different contents for each radio button selection.

$('input[type="radio"][name="b_type"]').on('change',function(){
  var sel = $(this);
  if(sel.val() == 1){
    $('#person-block').show();
    $('#person-institute').show();
  }else{
    $('#institute-block').show();
    $('#person-block').hide();
});

This code is working in some way. But there is a problem. Default radio button checked is dynamic. Lets assume second button is checked when the page is loading, then it display #persion-block contents. But I want to display #institute-block contents.

If I click on first button and then click on second its working.

Can anybody tell me how to figure this out? Thank you.

Answer 1

Just trigger the change event in the element inside the document.ready

Note : You have some id typo .

$('input[type="radio"][name="b_type"]').on('change',function(){
alert($(this).val());
  if($(this).val() == "1"){
    $('#person-block').show();
    $('#institute-block').hide();
  }else{
    $('#institute-block').show();
    $('#person-block').hide();
    }
});

$(document).ready(function(){
$('input[type="radio"][name="b_type"]:checked').change();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
  <label class="radio-inline">
    <input type="radio" name="b_type" value="1" > Person
  </label>
  <label class="radio-inline">
    <input type="radio" name="b_type" value="2" checked> Institute
  </label>
</div>
<div id="person-block" >
  Person
</div>
<div id="institute-block" >
  Institute
</div>

</div>