使用jquery克隆复选框标签并附加到最近的div

我正在尝试创建一个搜索筛选器，该筛选器显示用户在div中签入的值的列表。我希望通过克隆复选框的标签来完成此操作

因此，当用户单击其中一个字段集中的复选框时，它应该克隆并将其标签附加到下面的“列表”div中。这是我的html：

<div class="filters">
<h2>Narrow by:</h2>
<fieldset>
<legend>Product</legend>
<p>
  <label for="one">Filter 1 Label</label>
  <input type="checkbox" id="one">
</p>
<p>
  <label for="two">Filter 2 Label</label>
  <input type="checkbox" id="two">
</p>
<p>
  <label for="three">Filter 3 Label</label>
  <input type="checkbox" id="three">
</p>
</fieldset>
<div class="list"> </div>
<fieldset>
<legend>Product Version</legend>
<p>
  <label for="four">Filter 4 Label</label>
  <input type="checkbox" id="four">
</p>
<p>
  <label for="five">Filter 5 Label</label>
  <input type="checkbox" id="five">
</p>
<p>
  <label for="six">Filter 6 Label</label>
  <input type="checkbox" id="six">
</p>
</fieldset>
<div class="list"> </div>
</div>

但它不起作用。这是一把小提琴：

---

感谢您的帮助。

Label是您的兄弟姐妹。最亲的父母。“列表”不是父项

//don't bind on document with delegates if you can avoid to
$('.filters').on('click', 'fieldset input:checkbox',function(){
    var $checkbox = $(this);

    if ($checkbox.is(':checked')) {
        $checkbox.parent().find('label').clone().appendTo($('.list'));
    }
});

在包含jquery之后，它在您的小提琴中起作用，但会附加到所有列表元素。你可以做$CaskBox。最近（'FieldSt'）.NeXT（）而不是$（'.List'），但是你应该考虑改变你的标记，这样你就不必依赖NEXT（）了。任何基于立场的逻辑都是天生脆弱的

//don't bind on document with delegates if you can avoid to
$('.filters').on('click', 'fieldset input:checkbox',function(){
    var $checkbox = $(this);

    if ($checkbox.is(':checked')) {
        $checkbox.parent().find('label').clone().appendTo($('.list'));
    }
});