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

Question

嗨，我的任务是动态添加字段到表单，当我点击一个链接。

我是成功的文本字段，以及文件类型，但不是当我尝试这样做的输入类型的单选按钮。

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

这里是我的代码：

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>

请让我知道我错了。

Answer 1

只能从同名单选按钮列表中选择一个单选按钮。即为什么你无法为每一行选择单选按钮。为了解决这个问题，利用计数器来给您添加的每一行给予不同的名称，如 '<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>

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'