基於複選框值的項目從一個列表到另一個列表

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> 
<p>Second List</p> 
<ul class='second-list'> 
<ul> 

我需要： 當我檢查項目，將它複製到第二個列表。 未選中時 - 此項目應從第二個列表中刪除。 Here你可以找到基本結構

Answer 1

你可以做這樣的事情

var $chk = $('.first-list input').change(function() { // bind event handler to checkbox 
 
    $('.second-list').html(// update html of second list 
 
    $chk.filter(':checked') // get all checked checkbox 
 
    .map(function() { // use map to get array of cloned element 
 
     return $(this).parent().clone(); // clone the li 
 
    }).get() // get the cloned element array 
 
); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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> 
 
<p>Second List</p> 
 
<ul class='second-list'> 
 
    <ul>