如何将表单外动态生成的复选框移入表单并提交其状态？

这是非常合理的实现思路，表单提交时只会收集其内部包含的表单控件数据，只要在用户点击提交前，把那些动态生成在form外的checkbox移动或复制到form元素内部，表单就能识别到这些控件。

• 关于选中状态与提交数据：
  默认情况下，只有被勾选的checkbox会被表单纳入提交数据（以name=value的形式），未勾选的checkbox不会出现在提交的参数里。如果你的需求是要获取所有checkbox（无论是否勾选）的状态，那你需要额外处理：比如给每个未勾选的checkbox添加对应的隐藏input（例如<input type="hidden" name="xxx" value="false">），或者在提交前用JS遍历所有checkbox，把每个的checked状态整理好，再通过AJAX提交完整数据。

• 关于自定义属性data-names：
  表单默认只会提交控件的标准表单属性（比如name、value、checked），像data-names这种自定义data属性不会自动被提交。如果需要把这个属性的值也传递到后端，你可以：

  • 把data-names的值赋值给checkbox的value属性（如果不与原有业务冲突的话）；
  • 为每个checkbox添加对应的隐藏input，将data-names的值存在其中；
  • 在提交前用JS收集所有checkbox的data-names值，和其他数据一起通过AJAX发送。

• 关于id属性：
  id是元素的标识，表单提交时不会主动提交id的值，如果你需要把id也传递到后端，同样需要通过上述类似的方式（比如存入隐藏字段，或者在JS里收集后提交）。

比如你可以用这样的JS逻辑来处理：

// 获取所有目标checkbox和表单元素
const checkboxes = document.querySelectorAll('.your-checkbox-class');
const form = document.getElementById('your-form-id');

// 把checkbox复制后追加到form里（保留原位置的checkbox，避免原元素被移出）
checkboxes.forEach(checkbox => {
  const checkboxCopy = checkbox.cloneNode(true);
  form.appendChild(checkboxCopy);
  
  // 添加隐藏字段存储data-names属性值
  const dataInput = document.createElement('input');
  dataInput.type = 'hidden';
  dataInput.name = `${checkboxCopy.name}_data_names`;
  dataInput.value = checkboxCopy.dataset.names;
  form.appendChild(dataInput);
  
  // 添加隐藏字段存储id属性值
  const idInput = document.createElement('input');
  idInput.type = 'hidden';
  idInput.name = `${checkboxCopy.name}_id`;
  idInput.value = checkboxCopy.id;
  form.appendChild(idInput);
});

// 处理未勾选的checkbox：添加对应状态的隐藏字段
checkboxes.forEach(checkbox => {
  if (!checkbox.checked) {
    const statusInput = document.createElement('input');
    statusInput.type = 'hidden';
    statusInput.name = `${checkbox.name}_checked`;
    statusInput.value = 'false';
    form.appendChild(statusInput);
  }
});

这样调整后，表单提交时就能获取到你需要的所有属性和状态了。

内容的提问来源于stack exchange，提问作者Anthony Salamin