动态添加无线电输入不能与名称相同的其他人一起使用

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>