换句话说,在不触发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的那些,但是从不复制手动更改的状态(运行代码段,选择一些,点击“突出显示”,然后单击“复制”)...

最佳答案

使用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>

关于javascript - 如何复制手动(未选中)复选框的状态?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39107627/

10-12 00:06
查看更多