基于复选框值的项目从一个列表到另一个列表

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>