javascript - 如何使用两个单选按钮显示隐藏两个文本框

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单选按钮的数量相同，因此它形成一个组并给它一个 event的click并基于 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>