如何使用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;
}
<ul class="checklist">
  <li><span><cite></cite