如何使用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'