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

换句话说，如果不触发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是正确选择，但手动的状态改变的是从不复制的（运行片段，选择几个，点击“高亮”然后“复制”）...

来源

2016-08-23 CPHPython

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

来源

2016-08-23 17:48:31 xorspark

我想我应该更好看到jQuery的克隆...谢谢xorspark！但是，定义复选框状态的属性是什么？ – CPHPython

在vanillajs中你会看到'checked'属性。在jQuery中，你可以使用'prop（'checked'）来查找它' – xorspark

该脚本可行，但解释是错误的。这里的“修复”是克隆节点上缺少的.html（）调用！用'.clone（）'工作[fiddle]（https://jsfiddle.net/vpkctrfe/），用'.clone（true）工作[fiddle]（https://jsfiddle.net/9k6j5o1d/）。 html（）' – Andreas

不要使用.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>

来源

2016-08-23 17:58:21 Andreas

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

回答

相关问题