Question

<label>
  <input  type="radio" name="optradio" >1 PERSON
</label>
<label>
  <input  type="radio" name="optradio" >2 PERSON
</label>
<label>
  <input  type="radio" name="optradio" >3 PERSON
</label>

<div class="table-responsive">
  <table class="table table-hover table-striped mah">
    <tbody>
      <tr>
        <td>
          <div class="form-group">
            <input type="text" name="f1-email" placeholder="Name" class="f1-email form-control" id="f1-email"></div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

当前，有一个输入。如果用户选择一个2人或3人单选按钮，则需要显示2或3个输入字段，并根据用户选择动态添加行

Answer 1

这里简单的使用循环并将html放入容器中：

<label>
<input  type="radio" name="optradio" value="1">1 
 PERSON
</label>
<label>
<input  type="radio" name="optradio" value="2" >2 
PERSON
</label>
<label>
<input  type="radio" name="optradio" value="3" >3 
PERSON
</label>

<div class="table-responsive">
<table class="table table-hover table-striped mah">
<tbody id="container">

  </tbody>
 </table>
  </div>

并使用jquery循环简单地创建动态内容：

$('input[type="radio"]').click( function(){
$val = $(this).val();
$('#container').html('');
$content = '';
var i = 1;
for( i = 0; i < $val; i++ ) {
    $content += '<tr><td><div class="form-group"><input type="text" name="f1-email" placeholder="Name" class="f1-email form-control" id="f1-email"></div></td></tr>';
}
   $('#container').html($content);
 });

希望这会有所帮助。

Answer 2

我在CodePen上为您创建了一个很好的示例。

请参见Radio Inputs上的动画创意（@animatedcreativity）的笔CodePen。

所有元素都是使用虚拟HTML元素动态创建的。请编辑虚拟HTML元素，以对输入元素进行任何更改。
您可以提供要添加的元素数量。
脚本还会触发提供的回调，以便您可以在更改输入数量时执行相关操作。
您可以使用结果对象的elements属性访问动态创建的元素。请检查下面的示例。

用法示例： var result = new radioInputs(5, document.querySelector(".radio-inputs"), function(count) { console.log(count, result.elements); });

根据用户选择添加动态行

2 个答案: