將所有已檢查的列表項目複製到另一個列表

Question

我試圖實現某些功能。
當我檢查項目時，它複製到第二個列表。
所有的工作。
我添加按鈕，它將所有複選框設置爲選中狀態。 但是，當我點擊它，所有項目不會複製到第二個列表。 你能幫我嗎？

<p>First List</p> 
<ul class='first-list'> 
    <li> 
    <input type='checkbox' id='ckbx1'><label for='ckbx1'>One</label> 
    </li> 
    <li> 
    <input type='checkbox' id='ckbx2'><label for='ckbx2'>Two</label> 
    </li> 
    <li> 
    <input type='checkbox' id='ckbx3'><label for='ckbx3'>Tree</label> 
    </li> 
    <li> 
    <input type='checkbox' id='ckbx4'><label for='ckbx4'>Four</label> 
    </li> 
</ul> 
<span class="addAll">Add All</span> 
<p>Second List</p> 
<ul class='second-list'> 
</ul> 

和jQuery

var $chk = $('.first-list input').change(function() { 
    $('.second-list').html(
    $chk.filter(':checked').map(function() { 
     return $(this).parent().clone(); 
    }).get() 
); 
}) 
$('.addall').click(function() { 
    $('.first-list input').prop('checked',true); 
}) 

這裏是小提琴 - https://jsfiddle.net/gf4xm8pk/3/

非常感謝和抱歉，我的英語水平。

Answer 1

你只需要觸發更改事件：

$('.addall').click(function() { 
    $('.first-list input').prop('checked',true).trigger('change'); 
}) 

的updated jsFiddle。

更改事件發生在存在用戶交互時：例如，點擊或鍵盤事件。當以編程方式影響項目的狀態或值時，附加的事件通常不會自動觸發，因此您必須自己強制執行。

Answer 2

我的解決方案可能很長，但其所有的代碼。
因此請嘗試fiddle