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

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.

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>

use .is(':checked')

if($('#myradiobutton').is(':checked')){
 // this
}else{
 // that
}

You can check which button is checked on page load with the :checked pseudo class (additionally to your existing event handler):

if ($('input[type="radio"][name="b_type"]:checked').val() == 1) {
  $('#person-block').show();
} else {
  $('#institute-block').show();
}

.block {
  display: none;
}

<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" class="block">
  Person
</div>
<div id="institute-block" class="block">
  Institute
</div>

Additionally I would recommend hiding both elements on default to avoid showing the content of both before the JS has been loaded.

</div>

 $(document).ready(function () {

            $('input[type="radio"][name="b_type"]').on('change', function () {

                var sel = $(this).filter(':checked').val();
               
                if (sel == 1) {
                    $('#person-block').show();
                    $('#institute-block').hide();
                } else {
                    $('#institute-block').show();
                    $('#person-block').hide();
                }
            });
        });

<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" <?=(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>
 <div style="display:none" id="person-block"  class="block">
      Person
    </div>
    <div style="display:none" id="institute-block" class="block">
      Institute
    </div>

</div>

$("#redio1").click(function(){
    $('#person-block').css('display','block');
    $('#person-institute').css('display','block');
})
$("#redio2").click(function(){
    $('#institute-block').css('display','block');
    $('#person-block').css('display','none');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-5">
  <label class="radio-inline">
    <input type="radio" id="redio1" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ?  ' checked' : ''?>> Person
  </label>
  <label class="radio-inline">
    <input type="radio" id="redio2" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ?  ' checked' : ''?>> Institute
  </label>
</div>
<div id="person-block" style="color:red;display:none;">person-block</div>
<div id="person-institute" style="color:black;display:none;">person-institute</div>

</div>

  $(document).ready(function () {

            $('input[type="radio"][name="b_type"]').on('change', function () {

                var sel = $(this).filter(':checked').val();
               
                if (sel == 1) {
                    $('#person-block').show();
                    $('#institute-block').hide();
                } else {
                    $('#institute-block').show();
                    $('#person-block').hide();
                }
            });
        });

<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 style="display:none" id="person-block"  class="block">
      Person
    </div>
    <div style="display:none" id="institute-block" class="block">
      Institute
    </div>

</div>