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

Question

这是我的 html 代码:

<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>

如何显示等于单选按钮值的文本框数。例如，使用 JavaScript 选择“2”时显示 2 个文本框或在选择“3”时显示 3 个文本框？

Answer 1

试试这段代码

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