Artikel von einer Liste zu einer anderen basierend auf dem Kontrollkästchen Wert

Question

Ich habe ein Problem und ich habe keine Ahnung, wie es zu lösen. Ich habe zwei Listen. In erster - Artikel mit Checkbox und Label

<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> 

ich brauche: Wenn ich Artikel überprüft, es auf die zweite Liste kopieren. Wenn nicht markiert - dieser Artikel sollte aus der zweiten Liste entfernt werden. Here können Sie die Grundstruktur

Answer 1

finden Sie so etwas wie dieses Was haben Sie versucht

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>