如何複製手動（未）檢查複選框的狀態？

換句話說，如果不觸發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

如何複製手動（未）檢查複選框的狀態？

回答

相關問題