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

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 相同，使其形成一个组，并根据 radio 显示的值给它一个 click 的单个 event或隐藏所需的文本框，如下所示：

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

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

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

html

javascript

textbox

show-hide

radio-button

Html

js