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已正确选择，但手动更改的状态永远不会被复制（运行代码段，选择一些，点击“突出显示”然后“复制”）... < / p>

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）。~~

根据安德烈亚斯的评论进行编辑：对克隆进行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>

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

2 个答案: