javascriptを使用してダイナミックラジオボタンを作成する方法

Question

こんにちは私の仕事は、リンクをクリックすると、フォームにフィールドを動的に追加することです。

私はテキストフィールドとファイルタイプには成功しましたが、タイプラジオボタンの入力に対してこれを実行しようとしました。

2つの行を作成し、1つの行でジェンダーを選択したとします。男性、2行目で女性を選択したい場合は、最初の行のラジオボタンの値が消えます。だから私は、異なる複数の行の異なるラジオボタンの値を選択したい。

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

同じ名前のラジオボタンのリストから選択できるラジオボタンは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

のように、あなたは追加各行に別々の名前を付けるためにカウンタを利用しますなぜラジオボタンを1つだけ選択したのかだから、

、このようなあなたのラジオボタンを変更します。VARUNを助けるために喜ん

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