jquery - 单击时切换克隆

Question

HTML:

<div class="checkbox">
  <label for="input-1">
<input type="checkbox" id="input-1" class="js-wpv-filter-trigger" name="wpv-known-as[]" value="input-1">input-1</label>
</div>
<div class="checkbox">
  <label for="input-2">
<input type="checkbox" id="input-2" class="js-wpv-filter-trigger" name="wpv-known-as[]" value="input-2">input-2</label>
</div>
<div class="show-labels">
</div>

当单击input时，我想复制它的父label并将其附加到外部.show-labels div。但是当我再次单击它时，我希望将复制的标签从 .show-labels 中删除 - 等等，以便进行下一个输入。

我正在尝试这个，但没有成功:

$('.checkbox input').click(function() {
  var thisval = $(this).val();
  $(this).parent().addClass(thisval);
  var copy = $(this).parent().html();
  var clicks = $(this).data('clicks');
  if (clicks) {
    $(".show-labels").append(copy);
  } else {
    $(".show-labels label").hasClass(thisval).remove();
  }
  $(this).data("clicks", !clicks);
});

Answer 1

您可以使用clone克隆一个元素，然后在未选中时将其删除。

我还提供了演示以仅获取文本

$('.checkbox input').on("change",function() {
   if($(this).is(":checked")){
    var label= $(this).closest('label').clone();
    $('.show-labels').append(label);
   }
   else{
    $(".show-labels").find('label[for="' + $(this).attr('id') + '"]').remove();
   }
});

$('.checkbox input').on("change",function() {
   if($(this).is(":checked")){
    var label= $(this).closest('label').text();
    $('.show-labelsonlytext').append("<span for="+$(this).attr("id")+">"+label+ "</span>");
   }
   else{
    $(".show-labelsonlytext").find('span[for="' + $(this).attr('id') + '"]').remove();
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox">
  <label for="input-1">
<input type="checkbox" id="input-1" class="js-wpv-filter-trigger" name="wpv-known-as[]" value="input-1">input-1</label>
</div>
<div class="checkbox">
  <label for="input-2">
<input type="checkbox" id="input-2" class="js-wpv-filter-trigger" name="wpv-known-as[]" value="input-2">input-2</label>
</div>
with input
<div class="show-labels">
</div>
without input
<div class="show-labelsonlytext">
</div>