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

Question

想象一下这个问题：我有一个带有 3 个同名无线电输入的表单，我有一个按钮可以添加另一个与前 3 个同名的无线电输入。问题是在我添加另一个无线电字段之后通过按钮，收音机不与前 3 个收音机合作（就像它为这些收音机添加了另一个组）。

要查看问题，请按几次 "Add Line" 按钮，而不是使用单选按钮。前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 就在表格内。也许这会解决您的问题：

<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>

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

Adding radio input dynamically doesn't work with others with the same name

html

javascript

dynamic

radio-button