javascript - How to make a show hide of two textboxes using two radio buttons -

by clicking on radio buttons need show hide 2 text boxes. when click on radio1 text box1 shows .. need show text box2 on clicking radio button2 , hide textbox1

please me solve below code

html

   <p>       kyc<input type="radio" name="radio1" value="show">       bank otp<input type="radio" name="radio2" value="hide">   </p>   <div class="textd1">      <p>textbox #1 <input type="text" name="text1" id="text1" maxlength="30"></p>  </div>  <div class="textd2">  <p>textbox #2 <input type="text" name="text2" id="text2" maxlength="30">/p>  </div> 

js

   $(document).ready(function() {         $(".textd1").hide()         $(".textd2").hide()         $('[name=radio1]').on('change', function(){             $('.textd1').toggle(this.value === 'show');         })          $('[name=radio2]').on('change', function(){             $('.textd2').toggle(this.value === 'show');         })     }); 

keep name of radio buttons same forms group , give single event of click , based on value of radio show or hide required textbox below:

$(document).ready(function() {    $(".textd1").hide()    $(".textd2").hide()    $('[name=radio]').on('click', function() {      if ($(this).val() == "show") {        $('.textd1').show();        $('.textd2').hide();      } else {        $('.textd1').hide();        $('.textd2').show();      }    })  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <p>    kyc    <input type="radio" name="radio" value="show">bank otp    <input type="radio" name="radio" value="hide">  </p>    <div class="textd1">    <p>textbox #1      <input type="text" name="text1" id="text1" maxlength="30">    </p>  </div>  <div class="textd2">    <p>textbox #2      <input type="text" name="text2" id="text2" maxlength="30">    </p>  </div>