動態添加無線電輸入無法與其他同名

Question

想象一下問題：我有一個帶有3個無線電輸入的表單，其名稱相同，我有一個按鈕，它添加了與第一個相同名稱的無線電輸入3.問題是，在我通過按鈕添加另一個無線電場後，無線電與前3個無線電臺不配合（就像它爲這些無線電臺增加了另一個組合）。

要查看問題，請按幾下「添加線」按鈕，而不是單擊按鈕播放。前3個默認收音機在一個組中，並且所添加的一個在不同的組中。

有人能告訴我如何使所有這些無線電相互合作（如在一個組）？

的代碼：

function addAnswer(value) { 
 
    thebutton = value; 
 
    console.log(value); 
 
    table = document.getElementById("thetable"); 
 
    row = table.insertRow(table.rows.length); 
 

 
    cell1 = row.insertCell(0); 
 
    cell2 = row.insertCell(1); 
 
    cell1.innerHTML = '<input type="text" name="answer[]" required style="width: 100%;" placeholder="Wpisz tutaj odpowiedź">'; 
 
    cell2.innerHTML = '<input type="radio" value="' + value + '" name="correct">'; 
 

 
    document.getElementById("addbutton").value = parseInt(value) + 1; 
 

 
}

<table style="width: 100%;" id="thetable"> 
 
    <form action="" method="POST"> 
 
    <tr> 
 
     <td style="width: 80%;">Odpowiedź</td> 
 
     <td style="width: 20%;">Poprawna</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" name="answer[]" required style="width: 100%;" placeholder="Wpisz tutaj odpowiedź"> 
 
     </td> 
 
     <td> 
 
     <input type="radio" id="radio0" name="correct" value="0"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" name="answer[]" required style="width: 100%;" placeholder="Wpisz tutaj odpowiedź"> 
 
     </td> 
 
     <td> 
 
     <input type="radio" id="radio1" name="correct" value="1"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" name="answer[]" required style="width: 100%;" placeholder="Wpisz tutaj odpowiedź"> 
 
     </td> 
 
     <td> 
 
     <input type="radio" id="radio2" name="correct" value="2"> 
 
     </td> 
 
    </tr> 
 

 
</table> 
 
<button type="button" value="3" id="addbutton" onclick="addAnswer(this.value)" style="width: auto; height: auto;">Add line</button> 
 
<input type="hidden" name="questionId" value="<?php echo $id[0]['id']; ?>"> 
 
</form>

Answer 1

如果切換這兩條線，表的形式的內部。也許這將解決您的問題：

<table style="width: 100%;" id="thetable"> 
    <form action="" method="POST"> 

function addAnswer(value) { 
 
    thebutton = value; 
 
    console.log(value); 
 
    table = document.getElementById("thetable"); 
 
    row = table.insertRow(table.rows.length); 
 

 
    cell1 = row.insertCell(0); 
 
    cell2 = row.insertCell(1); 
 
    cell1.innerHTML = '<input type="text" name="answer[]" required style="width: 100%;" placeholder="Wpisz tutaj odpowiedź">'; 
 
    cell2.innerHTML = '<input type="radio" value="' + value + '" name="correct">'; 
 

 
    document.getElementById("addbutton").value = parseInt(value) + 1; 
 

 
}

<form action="" method="POST"> 
 
    <table style="width: 100%;" id="thetable"> 
 
    <tr> 
 
     <td style="width: 80%;">Odpowiedź</td> 
 
     <td style="width: 20%;">Poprawna</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" name="answer[]" required style="width: 100%;" placeholder="Wpisz tutaj odpowiedź"> 
 
     </td> 
 
     <td> 
 
     <input type="radio" id="radio0" name="correct" value="0"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" name="answer[]" required style="width: 100%;" placeholder="Wpisz tutaj odpowiedź"> 
 
     </td> 
 
     <td> 
 
     <input type="radio" id="radio1" name="correct" value="1"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" name="answer[]" required style="width: 100%;" placeholder="Wpisz tutaj odpowiedź"> 
 
     </td> 
 
     <td> 
 
     <input type="radio" id="radio2" name="correct" value="2"> 
 
     </td> 
 
    </tr> 
 

 
</table> 
 
<button type="button" value="3" id="addbutton" onclick="addAnswer(this.value)" style="width: auto; height: auto;">Add line</button> 
 
<input type="hidden" name="questionId" value="<?php echo $id[0]['id']; ?>"> 
 
</form>