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中删除活动类后删除该值。提前致谢。请参考小提琴。 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

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

<强> Demo

Answer 3

然而，这不起作用，就好像你的列表项具有相同的文本一样collide考虑通过jQuery中的id属性添加data。

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

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

3 个答案:

DEMO

DEMO