Show and Hide DIV TextBoxes on RadioButton using jQuery

Show and Hide DIV TextBoxes based on RadioButton using jQuery, Show Hide Textbox on radio button click, show hide textbox using jquery

by Intesar Haider

HTML

<div>Do you have Pin No?</div>
<label for="chkYes">
  <input type="radio" id="chkYes" name="chkPinNo" /> Yes
</label>
<label for="chkNo">
  <input type="radio" id="chkNo" name="chkPinNo" /> No
</label>
<hr>
<div id="dvPinNo" style="display: none">
  Pin No:
  <input type="text" id="txtPinNo" />
</div>

CSS

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

JavaScript

$(function() {
   $("input[name='scheduleTime']").click(function() {
     if ($("#chkYes").is(":checked")) {
       $("#dvPinNo").show();
     } else {
       $("#dvPinNo").hide();
     }
   });
 });