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

【问题标题】：How to create dynamic radio button using javascript如何使用javascript创建动态单选按钮
【发布时间】：2016-10-21 07:57:32
【问题描述】：

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

我在文本字段和文件类型方面都成功了，但当我尝试对单选按钮类型的输入执行此操作时却没有。

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

这是我的代码：

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

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

请让我知道我错在哪里。

【问题讨论】：

标签： javascript php jquery html

【解决方案1】：

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

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

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

【讨论】：

很高兴帮助 varun :)

【解决方案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'

【讨论】：