Question

我要在复选框单击时附加按钮，但是当我关闭附加按钮时需要取消选择。

$(".left-menu input[name='freeAsset']").click(function() {
  if ($(this).is(':checked')) {
    $('.search_lable').append('<li><button type="button" class="btn-close image" aria-label="Close" style="display: inline-block;">' + $(this).parent('div').children('span').text() + '<span aria-hidden="true" id="' + this.id + '">×</span></button></li>');
    $('.filter-label li .btn-close span').click(function() {
      $(this).closest('li').remove();
    });
  } else {
    $(".search_lable").find("button:contains(" + $(this).parent('div').children('span').text() + ")").filter(function() {
      return $(this).parent('li').length > 0;
    }).remove();
  }
});

FIDDLE DEMO

Answer 1

从问题上我了解到，OP需要在关闭按钮后取消选中复选框。所以我按照以下方式做。

$('.filter-label li .btn-close span').click(function(){
      $('input[type=checkbox][id='+$(this).attr('id') +']').prop('checked',false);// Newly added code to uncheck the checkbox.
        $(this).closest('li').remove();
});

DEMO HERE

Answer 2

Working fiddle 。

由于在用户检查时要附加li元素，因此您需要在删除用户时删除父项li而不是按钮本身，因此在删除之前只需添加.closest('li') ：

$(".search_lable").find("button:contains(" + $(this).parent('div').children('span').text() + ")").filter(function() {
  return $(this).parent('li').length > 0;
}).closest('li').remove();
___^^^^^^^^^^^^^

Answer 3

在else中，您尝试选择按钮并使用.remove()将其删除。因此，您应该使用li选择.parent()按钮的父级并将其删除。

$(".left-menu input[name='freeAsset']").click(function() {
  if($(this).is(':checked')) {
    $('.search_lable').append('<li><button type="button" class="btn-close image" aria-label="Close" style="display: inline-block;">'+ $(this).parent('div').children('span').text() +'<span aria-hidden="true" id="'+this.id+'">×</span></button></li>');
    $('.filter-label li .btn-close span').click(function(){
      $(this).closest('li').remove();
    });
  } else {
    $(".search_lable").find("button:contains(" + $(this).parent('div').children('span').text() +")").filter(function () {
      return $(this).parent('li').length > 0;
    }).parent().remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="left-menu">
  <li>
    <div class="label-cont clearfix">
      <input type="checkbox" name="freeAsset" value="valuable" id="Skills1">
      <label for="Skills1" class="chk"></label>
      <span class="txt">Soft Skills</span>
    </div>
  </li>
  <li>
    <div class="label-cont clearfix">
      <input type="checkbox" name="freeAsset" value="valuable" id="Skills2">
      <label for="Skills2" class="chk"></label>
      <span class="txt">Technical Skills</span>
    </div>
  </li>
</ul>
<ul class="filter-label clearfix search_lable"></ul>

您还可以使用下面显示的更简单的代码

$(".left-menu input[name='freeAsset']").click(function() {
  var text = $(this).parent('div').children('span').text();
  if ($(this).is(':checked'))
    $('.search_lable').append('<li><button type="button" class="btn-close image" aria-label="Close" style="display: inline-block;">'+ text +'<span aria-hidden="true" id="'+this.id+'">×</span></button></li>');
  else 
    $(".search_lable li button:contains("+text+")").parent().remove();
});    
$(document).on('click', '.filter-label li .btn-close span', function(){
  $(this).closest('li').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="left-menu">
  <li>
    <div class="label-cont clearfix">
      <input type="checkbox" name="freeAsset" value="valuable" id="Skills1">
      <label for="Skills1" class="chk"></label>
      <span class="txt">Soft Skills</span>
    </div>
  </li>
  <li>
    <div class="label-cont clearfix">
      <input type="checkbox" name="freeAsset" value="valuable" id="Skills2">
      <label for="Skills2" class="chk"></label>
      <span class="txt">Technical Skills</span>
    </div>
  </li>
</ul>
<ul class="filter-label clearfix search_lable"></ul>

取消选中单击按钮上的复选框

3 个答案: