如何使用jquery追加和删除复选框的值到ul li

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

I need to append the value of the checklist li to the list of the append-checklist once the checklist li has the class active and remove the value once active class is removed from the checklist li. Thanks in advance. Please refer to the fiddle. Demo

一旦checklist li激活了类，我需要将checklist li的值附加到append-checklist的列表中，并且一旦从checklist li中删除活动类，就删除该值。提前致谢。请参考小提琴。演示

3 个解决方案

#1

Try to .clone() the selected lis and then .append() it into the other UL as per your wish,

尝试.clone（）选择的lis然后.append（）根据你的意愿将它放入另一个UL中，

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

DEMO

As per your new requirement use,

根据您的新要求使用，

$('.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

#2

Try this : check if clicked li has class="active-checklist" then make clone of it and add it to append-checklist, otherwise remove from append-checklist.

试试这个：检查点击li是否有class =“active-checklist”然后复制它并将其添加到append-checklist，否则从append-checklist中删除。

$('.checklist li').click(function () {
    $(this).toggleClass("active-checklist");
    if($(this).hasClass('active-checklist'))
     $(this).clone().appendTo('.append-checklist');
    else
     $('.append-checklist').find('li:contains('+$(this).text()+')').remove();
});

Demo

演示

#3

This works however is not robust as if you have list items with the same text they will collide consider adding ids either via the data attribute in jQuery.

然而，这种方法并不健壮，就好像你有相同文本的列表项一样，它们会考虑通过jQuery中的data属性添加id。

$('.checklist li').click(function () {
    var me = $(this);
    me.toggleClass("active-checklist");
    if (me.hasClass('active-checklist')) {
        me.clone().appendTo('.append-checklist');
    } else {
        // remove me
        $('.append-checklist li:contains(' + me.text() + ')').remove();
    }
});

Demo: http://jsfiddle.net/robschmuecker/hC35Y/3/

演示：http：//jsfiddle.net/robschmuecker/hC35Y/3/