Show and Hide contents base on radio button selection in jQuery

how to show and hide input fields based on radio button selection in jquery
radio button checked show div css
multiple radio button show/hide div
onclick radio button show/hide div javascript codepen
how to show and hide input fields based on radio button selection html
how to show/hide divs based on radio button selection using javascript
bootstrap radio button show/hide div
show div on radio button select javascript

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>

show and hide divs based on radio button click, How do you show and hide input fields based on checkbox? You can use jQuery show/hide function to Show/Hide div on radio button selected dynamically. To do this, you need to add some style, script and few HTML. Hide each div’s which you want to display on select of the radio buttons. The dynamic changes happen based on the click of the selected radio button.

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>

HTML <input type="hidden">, only stores those database records that need to be updated when submitting the form. 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.

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

HTML Tutorial - Hidden Fields, THIS IS MY SCRIPT**** <script src="http://code.jquery.com/jquery-latest.js"></​script> <script type ="text/javascript"> $(document).ready(function  Show Hide DIV with TextBox based on RadioButton selection using jQuery. The HTML Markup consists of two RadioButtons (one for Yes and other for No) and an HTML DIV consisting of a TextBox. Each RadioButton has been assigned a jQuery OnClick event handler.

use .is(':checked')

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

how to hide and show radio button based on radio button selection , Jquery hiding form elements based on radio button selection - jquery-tests.html. Raw. jquery-tests.html <div id="portion_one" style="display:none">. Answer: Use the jQuery change() method The following example will demonstrate you how to show and hide div elements based on the dropdown selection or selected option in a select box using the jQuery change() method in combination with the show() and hide() methods.

$("#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>

Jquery hiding form elements based on radio button selection · GitHub, How to use complex HTML with twitter Bootstrap tooltip using jQuery ? In order to display data/content of a specific element by selecting the particular radio Selector name for radio button is same as the element which is used to How to hide or show one record from an ng-repeat within a table based on ng-click? Here Mudassar Ahmed Khan has explained how to show and hide HTML DIV with TextBox based RadioButton selection or click i.e. when RadioButtons are checked (selected) and unchecked (unselected) using jQuery.

How to Show and Hide div elements using radio buttons , Your radio buttons are part of two different groups which is why they act independently. This is just plain HTML, give them the same name and they be part of a  Jquery hiding form elements based on radio button selection - jquery-tests.html

jQuery, If you know exactly which radio button you are interested in, then you should prefer to select it by ID, for performance. Presumably, your radio buttons will be part  Presumably, your radio buttons will be part of a group with the same name, so it would be more conventional to select the elements by the name instead of by a class. If you have to conditionally call .show() and .hide(), you can use .toggle(). Avoid hard-coding hide() as the initial state.

Hide or show if radio button is checked, <p>How many check boxes do you want when clicked on a radio button?</p>. 2. <input type="radio" name="tab" value="igotnone" onclick="show1();" />. 3. None. ASP.NET Forums / General ASP.NET / MVC / MVC JQuery Show/Hide divs per radio button selected MVC JQuery Show/Hide divs per radio button selected [Answered] RSS 1 reply

Comments
  • Just click the element inside the document.ready $('input[type="radio"][name="b_type"]:checked').click();
  • @JYoThI Can you show me an example?
  • check my below answer
  • @JYoThI, Yes its working perfectly. Thank you so much
  • Glad it that helps you :)
  • This is working but one issue. Content toggling is now working when each button select
  • Thank you. I checked but problem is same.
  • You have to execute the function on load too.
  • Just check but problem is same