如何使用两个单选按钮隐藏两个文本框

Question

通过单击单选按钮，我需要显示隐藏两个文本框。当我点击radio1文本框1显示.. 我需要在单击单选按钮2时显示文本框2并隐藏文本框1

请帮我用下面的代码解决

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');
        })
    });

Answer 1

保持单选按钮的name 相同，以便它形成一个组，并根据click 的单个event 并根据radio 的值显示或隐藏所需的文本框，如下所示：

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

Answer 2

试试这个方法

$(document).ready(function() {
    $(".textd1").hide()
    $(".textd2").hide()
    $('#a').on('change', function(){
        $(".textd2").hide()
      $('.textd1').show();
    }) 
    $('#b').on('change', function(){
        $(".textd1").hide()
        $('.textd2').show()
    })
});

https://jsfiddle.net/d1n4rg24/1/