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

这是您要找的吗？

...
from app.common.routes import main
from app.common.models import TipoPoste
from app.mod_tables.controllers import tables
...

请注意，没有理由使用$(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();
    }
  });
});

Answer 2

首先，您需要向所有div添加一个类，例如account_number：

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

然后您需要隐藏此div：

.account_number{
  display: none;
}

，当选中单选按钮时，您将隐藏所有div并显示相应的文本字段：

$("input:radio[name=\'article\']").change(function() { 

    $(".account_number").hide();

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

https://jsfiddle.net/b8pdao6L/1/

3文本字段取决于使用jQuery的单选按钮

2 个答案: