如何复制手动（未选中）复选框的状态？

Question

换句话说，在不触发Javascript事件更改<input>属性的情况下，如何保留我手动选中或未选中然后复制到另一个位置的复选框的状态？

运行以下代码段，然后选中或取消选中其中一些，然后点击“复制”：

 $('#cp').click(function(){ $('#copy').html($('#original').html()) $('#copy-clone').html($('#original').clone().html()) }) $('#hi').click(function(){ $('#original input:checked').parent().css('border','2px solid red') }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="original"> <label><input type="checkbox" name="man">man</label> <label><input type="checkbox" name="woman">woman</label> <label><input type="checkbox" name="monkey">monkey</label> <label><input type="checkbox" name="banana" checked="checked">banana</label> </form> <button id="cp">copy</button> <button id="hi">highlight</button> <br><form id="copy"></form> <br><form id="copy-clone"></form> 

之前或手动:checked那些已正确选择，但是从未更改过手动更改的状态（运行代码段，选择一些，点击“突出显示”，然后单击“复制”）...

Answer 1

不要使用.html()克隆元素

 $('#cp').click(function(){ var original = $('#original'); $('#copy').empty().append(original.clone()); $('#copy-clone').empty().append(original.clone()); }) $('#hi').click(function(){ $('#original input:checked').parent().css('border','2px solid red'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="original"> <label><input type="checkbox" name="man">man</label> <label><input type="checkbox" name="woman">woman</label> <label><input type="checkbox" name="monkey">monkey</label> <label><input type="checkbox" name="banana" checked="checked">banana</label> </form> <button id="cp">copy</button> <button id="hi">highlight</button> <br><form id="copy"></form> <br><form id="copy-clone"></form> 

Answer 2

使用clone(true)深度复制元素的数据/状态（ docs ）。

根据Andreas的评论进行编辑：无需对克隆进行html()调用。

 $('#cp').click(function(){ $('#copy').html($('#original').clone()) $('#copy-clone').html($('#original').clone()) }) $('#hi').click(function(){ $('#original input:checked').parent().css('border','2px solid red') }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="original"> <label><input type="checkbox" name="man">man</label> <label><input type="checkbox" name="woman">woman</label> <label><input type="checkbox" name="monkey">monkey</label> <label><input type="checkbox" name="banana" checked="checked">banana</label> </form> <button id="cp">copy</button> <button id="hi">highlight</button> <br><form id="copy"></form> <br><form id="copy-clone"></form>