javascript - 如何复制手动(未)选中复选框的状态？

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>