Question

我的任务是在点击链接时动态地向表单添加字段。

我是成功的文本字段，以及文件类型，但是当我尝试为单选按钮类型的输入执行此操作时。

假设我创建了两行并在一行中选择了性别，例如男性，并在第二行我想选择女性然后它将从第一行消失单选按钮的值。所以我想为不同的多行选择不同的单选按钮值。

这是我的代码：

＆＃13;

var counter = 0;
$(function(){
  $('p#add_field').click(function(){
    counter += 1;
    $('#container').append(
      '</br><strong>Item ' + counter + '</strong><br />'
      + '<input id="field_' + counter + '" name="item[]' + '" type="text" />' 
      +'<strong>quantity ' + counter + '</strong>' 
      +'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />' 
      +'<strong>rate ' + counter + '</strong>' 
      +'<input id="rate' + counter + '" name="rate[]' + '" type="text" />' 
      +'<strong>Amount ' + counter + '</strong>' 
      +'<input id="field_' + counter + '" name="amount[]' + '" type="text" />' 
      +'<strong>img ' + counter + '</strong>' 
      +'<input id="field_' + counter + '" name="image[]' + '" type="file" />' 
      +'<strong>Gender ' + counter + '</strong>' 
      +'<input id="male_' + counter + '" name="gender[]' + '" type="radio" value="male"/>Male' 
      +'<input id="female_' + counter + '" name="gender[]' + '" type="radio" value="female"/>female'   
    );
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="custom.js"></script>

<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">
  <div id="container">
    <p id="add_field"><a href="#"><span>Add Field</span></a></p>
  </div>

  <input type="submit" name="submit_val" value="Submit" />
</form>

＆＃13;

请告诉我错误的地方。

Answer 1

只能从具有相同名称的单选按钮列表中选择一个单选按钮。即为什么你不能为每一行选择单选按钮。要解决此问题，请使用计数器为您添加的每一行指定单独的名称，例如 '<input id="male_' + counter + '" name="gender' + counter + '[]" type="radio" value="male"/>Male'

＆＃13;

var counter = 0;
$(function(){
    $('p#add_field').click(function(){
    counter += 1;
    $('#container').append(
        '</br><strong>Item ' + counter + '</strong><br />'
        + '<input id="field_' + counter + '" name="item[]' + '" type="text" />' 
        +'<strong>quantity ' + counter + '</strong>' 
        +'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />' 
        +'<strong>rate ' + counter + '</strong>' 
        +'<input id="rate' + counter + '" name="rate[]' + '" type="text" />' 
        +'<strong>Amount ' + counter + '</strong>' 
        +'<input id="field_' + counter + '" name="amount[]' + '" type="text" />' 
        +'<strong>img ' + counter + '</strong>' 
        +'<input id="field_' + counter + '" name="image[]' + '" type="file" />' 
        +'<strong>Gender ' + counter + '</strong>' 
        +'<input id="male_' + counter + '" name="gender' + counter +  '[]" type="radio" value="male"/>Male' 
        +'<input id="female_' + counter + '" name="gender' + counter + '[]" type="radio" value="female"/>female'   
        );
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">

     <div id="container">
     <p id="add_field"><a href="#"><span>Add Field</span></a></p>
     </div>

     <input type="submit" name="submit_val" value="Submit" />
     </form>


    </body>
    </html>

＆＃13;

Answer 2

当您添加更多单选按钮时，您的所有单选按钮名称都相同，这就是您只选择一个单选按钮的原因。

所以，改变你的单选按钮：

+'<input id="male_' + counter + '" name="gender_'+counter+'[]" type="radio" value="male"/>Male' 
+'<input id="female_' + counter + '" name="gender_'+counter+'[]" type="radio" value="female"/>female'

如何使用javascript创建动态单选按钮

2 个答案: