Question

这是我的HTML代码：

＆＃13;

<div>
    <label for="accompanying_person" class="col-sm-4 col-form-label">Select number of accompanying person</label>
       <div class="col-sm-8">
               <input type="radio" name="accompanying_person" id="accompanying_person" value="1"> 1
               <input type="radio" name="accompanying_person" id="accompanying_person" value="2"> 2
               <input type="radio" name="accompanying_person" id="accompanying_person" value="3"> 3
       </div>
 </div>

＆＃13;

如何显示等于单选按钮值的文本框数。例如，显示2个文本框，当＆＃34; 2＆＃34;选择或显示3个文本框，当＆＃34; 3＆＃34;是使用JavaScript选择的吗？

Answer 1

您可以收听单选按钮的更改事件，并在值中循环以动态准备文本框。

请注意，parseInt实际上将值转换为整数，因为当使用.val()获取时，它将是一个字符串。

此外，不要在HTML页面中使用相同的ID ID。

$("input[type=radio][name=accompanying_person]").change(function() {
  var persons = parseInt($(this).val());
  var boxes = [];
  
  for (var i = 0; i < persons; i++) {
    boxes.push("<input type='text'>");
  }
  
  $("#boxes").html(boxes.join(""));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label for="accompanying_person" class="col-sm-4 col-form-label">Select number of accompanying person</label>
  <div class="col-sm-8">
    <input type="radio" name="accompanying_person" id="accompanying_person" value="1"> 1
    <input type="radio" name="accompanying_person" id="accompanying_person" value="2"> 2
    <input type="radio" name="accompanying_person" id="accompanying_person" value="3"> 3
  </div>
</div>

<div id="boxes">
</div>

Answer 2

试试这段代码

$(document).ready(function() {

  $(this).click(function() {
    $('#textbox').html('');
    var val = $('input[name=accompanying_person]:checked').val();
    for (var i = 1; i <= val; i++) {
      $('#textbox').append('<input type="text" id="' + i + '"><br>');
    }
  });
});

input {
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label for="accompanying_person" class="col-sm-4 col-form-label">Select number of accompanying person</label>
  <div class="col-sm-8">
    <input type="radio" name="accompanying_person" id="accompanying_person" value="1"> 1
    <input type="radio" name="accompanying_person" id="accompanying_person" value="2"> 2
    <input type="radio" name="accompanying_person" id="accompanying_person" value="3"> 3

  </div>
  <div id="textbox"></div>
</div>

选择单选按钮时显示文本框

2 个答案: