如何使用jQuery向ul添加和删除复选框的值

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的值附加到append-checklist的列表中，一旦从检查表li中移除了活动类，就需要删除该值。 提前致谢。 请参阅小提琴。 演示

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

Answer 2

试试这个：检查单击的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();
});

演示

Answer 3

但是，这种方法并不健壮，因为如果您有具有相同文本的列表项，则它们会collide考虑通过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();
    }
});

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