javascript - 3 文本字段依赖于使用 jquery 的单选按钮

Question

我想创建 3 个依赖于单选按钮的文本字段。当用户单击单选按钮的特定值时，文本字段的出现取决于用户的选择，反之亦然。

$(document).ready(function() {
  $("input:radio[name=\'article\']").change(function() {
    if (this.value == '1' && this.checked) {
      $("#nmb").show();
    }
    
    else if(this.value == '2' && this.checked) {
      $("#nbc").show();
    }

    else if(this.value == '3' && this.checked) {
      $("#crdb").show();
    } else {
      $("#crdb").hide();
      $("#nmb").hide();
      $("#nbc").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<input type="radio" name="article" value="1"> NMB Bank <input type="radio" name="article" value="2">NBC Bank <input type="radio" name="article" value="3"> CRDB Bank <br/><br/>

<div id="nmb">Account Number: <input type="text" name="number" maxlength="11"><br><br> </div>
<div id="nbc">Account Number: <input type="text" name="number" maxlength="13"><br><br> </div>
<div id="crdb">Account Number: <input type="text" name="number" maxlength="14"><br><br> </div>

Answer 1

这是你要找的吗？

$(document).ready(function() {
  $("input[name='article']").change(function() {
    $(".AccountHolder").hide();
    if ($(this).val() == 1) {
      $("#nmb").show();
    } else if (this.value == 2) {
      $("#nbc").show();
    } else if (this.value == 3) {
      $("#crdb").show();
    }
  });
});

请注意，没有理由使用 this.checked。

演示

$(document).ready(function() {
  $("input[name='article']").change(function() {
    $(".AccountHolder").hide();
    if ($(this).val() == 1) {
      $("#nmb").show();
    } else if (this.value == 2) {
      $("#nbc").show();
    } else if (this.value == 3) {
      $("#crdb").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<input type="radio" name="article" value="1"> NMB Bank <input type="radio" name="article" value="2">NBC Bank <input type="radio" name="article" value="3"> CRDB Bank <br/><br/>

<div id="nmb" class="AccountHolder">Account Number: <input type="text" name="number" maxlength="11"><br><br> </div>
<div id="nbc" class="AccountHolder">Account Number: <input type="text" name="number" maxlength="13"><br><br> </div>
<div id="crdb" class="AccountHolder">Account Number: <input type="text" name="number" maxlength="14"><br><br> </div>