Show and hide DIV’s based on radio button selection in jQuery

How to Show and hide DIV using radio button based on selection with the help of jQuery. On click radio button show respective DIV and hide DIV click on another radio button.

The following example will show you how to show and hide DIV’s based on radio button selection in jQuery.

Example 1:

<label for="chkYes">
    <input type="radio" id="chkYes" name="chkPinNo" /> Yes
  </label>
  <label for="chkNo">
    <input type="radio" id="chkNo" name="chkPinNo" /> No
  </label>
  -----------------------------
  <div class="driveingL">
    Do you have driver license?
    <label for="chkYes1">
      <input type="radio" id="chkYes1" name="chkPinNo1" /> Yes
    </label>
    <label for="chkNo1">
      <input type="radio" id="chkNo1" name="chkPinNo1" /> No
    </label>
  </div>
  -----------------------------
  <div class="panDeatils">
    Enter PAN Details
    <input type="text" placeholder="PAN No.">
  </div>

Example 2:

<label for="chk-Yes">
  <input type="radio" id="chk-Yes" name="show-div" /> Yes
</label>
<label for="chk-No">
  <input type="radio" id="chk-No" name="show-div" /> No
</label>
-----------------------------
<div id="showDiv" style="display: none">
  If yes then show this div and hide this div when click on No Option
</div>

------------JavaScript-----------------------
<script type="text/javascript">
  $(function() {
    $("input[name='show-div']").click(function() {
      if ($("#chk-Yes").is(":checked")) {
        $("#showDiv").show();
      } else {
        $("#showDiv").hide();
      }
    });
  });
</script>

Example 3:

------------CSS-----------------------
.alfabetBox {
  display: none;
}
------------HTML-----------------------
<label><input type="radio" name="alfabet" value="A"> Option-A | </label>
<label><input type="radio" name="alfabet" value="B"> Option-B | </label>
<label><input type="radio" name="alfabet" value="C"> Option-C | </label>
<label><input type="radio" name="alfabet" value="D"> Option-D | </label>
<label><input type="radio" name="alfabet" value="none">None</label>
-----------------DIV's-----------------
<div class="A alfabetBox"><strong>A DIV</strong><br />On click A radio button show DIV A</div>
<div class="B alfabetBox"><strong>B DIV</strong><br />On click B radio button show DIV B</div>
<div class="C alfabetBox"><strong>C DIV</strong><br />On click C radio button show DIV C</div>
<div class="D alfabetBox"><strong>D DIV</strong><br />On click D radio button show DIV D</div>

------------JavaScript-----------------------
<script type="text/javascript">
  $(document).ready(function() {
      $('input[type="radio"]').click(function() {
          var inputValue = $(this).attr("value");
          var targetBox = $("." + inputValue);
          $(".alfabet").not(targetBox).hide();
          $(targetBox).show();
      });
    });
  });
</script>

Add and Remove class click on Radio Button

Above example show how to show and hide dive based on radio button click, in the example’s show’s if yes then show div and if no then hide div, based on condition change the login and hide/show DIV based in selection. Using JavaScript add class and remove class also use to hide and show div. Using jQuery show() & hide() methods to show & hide the div elements based on the selection of radio buttons click. The DIV elements are hidden by default using the CSS display property none and on radio buttons click the DIV elements are visible.

You can customize this code further as per your requirement.