javascript - 如何使用 jquery 将复选框的值附加和删除到 ul li

Question

<ul class="checklist">
  <li><span><cite></cite></span><b>List 1</b></li>
  <li><span><cite></cite></span><b>List 2</b></li>
  <li><span><cite></cite></span><b>List 3</b></li>
  <li><span><cite></cite></span><b>List 4</b></li>
</ul>
<ul class="append-checklist">
</ul> 

$('.checklist li').click(function () {
   $(this).toggleClass("active-checklist");
});

.checklist li b 
{
    font-size: 14px;
    font-weight: 400;
    color: #555454;
    position: relative;
    top: -3px;
    padding-left: 5px;
    color:#a7a7a7;
}
.checklist li.active-checklist b
{
    color: #202020;
    font-size:inherit;
    top:2px;
}
.checklist li,.active-checklist li
{
    margin-bottom: 4px;
}
.checklist
{
    font-family:helvetica;
    font-size: 14px;
    margin-left: 23px;
    cursor: pointer;
    list-style-type: none;
    display: inline-block;
    float: left;
    margin-top: 15px;
    padding:0;
}

.checklist li span
{
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
    background-color: #f6f6f6;
    border: 1px solid #c2c2c2;
}
.checklist li.active-checklist span
{
    border: 1px solid #49a1d7;
}
.checklist li span cite
{
    display: none;
}
.checklist li.active-checklist span cite
{
    position: relative;
    left: 2px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: #49a1d7;
    border: none;
}

一旦检查列表 li 具有事件类，我需要将检查列表 li 的值附加到附加检查列表的列表中，并在从检查列表 li 中删除事件类后删除该值。提前致谢。请引用 fiddle 。 Demo

Answer 1

尝试 .clone() 选定的 li，然后根据您的意愿将其.append() 到另一个 UL，

$('.checklist li').click(function () {
    $(this).toggleClass("active-checklist");
    $('ul.append-checklist').empty().append($(this).closest('ul').find('.active-checklist').clone())
});

DEMO

根据您的新要求使用，

$('.checklist li').click(function () {
    $(this).toggleClass("active-checklist");
    $('ul.append-checklist').html($.map($(this).closest('ul').find('.active-checklist '),function(elem,i){ return "<li>" + $(elem).text() + '</li>'; }))
});

DEMO