使用Javascript将HTML表单字段动态替换为其他表单，但是将输入同步到原始/隐藏字段的最佳方法

Question

我正在尝试使用JS更改我网站上现有的第三方html表单。

我看过几篇关于此的文章，但找不到适合我情况的答案。

有问题的表单上有一个复选框字段，我想隐藏它并用单选按钮替换它。但是...然后，我还必须同步它们，以便访客在表单上对复选框所做的任何操作，都将反馈到隐藏的输入字段，以便提交表单时，当表单在原始字段中具有值时，表单已发布。

因此，新的“单选按钮”字段应有一个“是/否”选项，“是”会将原始复选框的值设置为TRUE，而“否”将其设置为FALSE。

为了清楚起见，我无权访问呈现表单的后端软件，因此只能选择在之后用JS对其进行更改。

Answer 1

我不确定我是否正确理解了这个问题，但这是一个示例，该示例显示如何在表单中隐藏复选框，在其中插入单选按钮并在提交表单之前更改复选框的值。

const form = document.getElementById('form');
const log = document.getElementById('log');
const checkbox = form.querySelector('input[type="checkbox"]');
const checkboxContainer = checkbox.closest('label');
const template = '<label><input type="radio" name="replaced" value="replaced">Yes</label> <label><input type="radio" name="replaced" value="" checked>No</label>';

form.insertAdjacentHTML('afterbegin', template);
checkboxContainer.style.display = 'none';

form.addEventListener('submit', (event) => {
  checkbox.checked = form.querySelector('input[name="replaced"]:checked').value !== "";
  log.textContent = checkbox.checked; // Show checkbox value
  event.preventDefault(); // prevent form submitting
});

<form id="form">
  <label>Hidden checkbox: <input type="checkbox" name="checkbox"></label>
  <br>
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>