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

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

我已经看过好几篇关于这个的帖子，但是找不到一个适合我情况的答案

有问题的表单上有一个复选框字段，我想隐藏它并用单选按钮替换它。然而。。。然后我还必须同步它们，这样无论访问者在表单上对复选框做什么，都会反馈到隐藏的输入字段，这样当表单提交时，在表单发布时，它在原始字段中有一个值

因此，新的单选按钮字段应该有一个Yes/No选项，Yes会将原始复选框值设置为TRUE，而不会将其设置为FALSE

---

为了澄清。。。我无法访问呈现表单的后端软件，因此只能选择在提交表单之前使用JS对其进行更改。

我不确定是否正确理解此问题，但下面是一个示例，说明如何在表单中隐藏复选框，在其中插入单选按钮并更改复选框值

const form=document.getElementById（'form'）；
const log=document.getElementById（'log'）；
const checkbox=form.querySelector（'input[type=“checkbox”]”）；
const checkboxContainer=checkbox.closest（'label'）；
常量模板='是否'；
表单insertAdjacentHTML（'afterbegin'，模板）；
checkboxContainer.style.display='none'；
form.addEventListener（'submit'，（事件）=>{
checkbox.checked=form.querySelector（'input[name=“replaced”]：checked'）。value！==“”；
log.textContent=checkbox.checked；//显示复选框值
event.preventDefault（）；//防止表单提交
});

隐藏复选框：


提交表格
非常感谢，这在我的情况下非常有效。我确实必须在window.addEventListener（'load'，（event）=>{}；中包装我的代码，以确保所有内容都准备好了，我正在更改。但是，我现在有一个次要问题，页面加载事件可以工作，但是有一个AJAX调用会更改页面DOM，当它从AJAX调用返回时（通过取消单击）然后，原始页面被刷新，我的更改在AJAX调用后不会再次触发。在AJAX刷新后再次触发它的最佳方式是什么？你说你没有访问后端的权限，但你可以编辑JS。因此，你应该更改处理AJAX响应的代码。