javascript - 替换单击单选按钮上的文本，如果单击其他单选按钮，则将其更改回原始文本

Question

字符串替换对我来说工作正常，但如何将最后单击的单选按钮标签文本恢复为原始文本？

function myFunction(id) {
    var str = document.getElementById(id).innerHTML; 
    var res = str.replace("{#var1#}", "<input type='text' name='var1' maxlength='30' size='30'>")
        .replace("{#var2#}", "<input type='text' name='var2' maxlength='30' size='30'>")
        .replace("{#var3#}", "<input type='text' name='var3' maxlength='30' size='30'>")
        .replace("{#var4#}", "<input type='text' name='var4' maxlength='30' size='30'>");
         document.getElementById(id).innerHTML = res;
}

这是我的PHP,HTML代码:

  <tr>
      <td><input onchange="myFunction('<?php echo $row['id']; ?>')" type="radio" name="id" value="<?php echo $row['id']; ?>" required></td>
      <td><b><?php echo  htmlspecialchars($row['template_name']);  ?></b></td>
      <td id="<?php echo $row['id']; ?>"><?php echo  str_replace("\n","<br />",htmlspecialchars($row['template_content']));  ?></td>
  </tr>

Answer 1

我认为您应该在输入中添加一个额外的属性(它可以是 data-origin 或类似的东西)。例如:

<input value="">
<div class="display" data-origin="xxxx"></div>

然后让一个函数触发输入的变化:

$(input).onchange(() => {
    $(display).innerHtml = $(display).attr(data-origin)
});
//===continue your stuff====