bug记录--表单提交checkbox失败

场景

今天遇到一个比较令人奇怪的bug：
表单提交checkbox复选框，但是复选框不在表单内，于是开发者将input的内容通过innerHtml复制到表单的id为hidden的dom中，然后进行提交。然后始终提交不了。
代码大致如下（其中也有jquery的prop操作checked等，但都不影响）：

<input type="checkbox"  id="nameCheck" onclick="iptFn()" name="name" value="小明" >小明
<form action="/formdata" method="post">
    <div id="hidden"></div>
    <p><input type="submit" value="Submit"></p>
</form>

原因：

因为innerHTML和jquery的html()复制都只是复制了dom元素，jquery的prop操作checkbox和用户手动直接点击checkbox都不会对dom元素在dom层上产生任何改变，所以html()方法复制的checkbox仍旧是初始状态的，而通过jquery的attr('checked', 'checked')则会对dom元素产生dom层的影响：<input type="checkbox" id="nameCheck" onclick="iptFn()" name="name" value="小明" checked='checked'>小明，这样，在通过html()方法复制时就是用户操作之后的dom，可以进行提交。

解决方案：

• 方法1： 通过attr()以及prop()联合实现。
• 方法2： 将复选框放到form表单中，这样无需js即可完成提交。