动态添加无线电输入不适用于同名的其他人

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>