想要从 jquery 的列表中删除取消选中的复选框值 [重复]

Question

当我选中任何一个复选框时，我会得到 li 中的值，如果我取消选中第一个复选框，然后选中第二个复选框，我想删除第一个复选框的文本/值，如下所示：

enter image description here

下面是我的代码：

$('input[type="checkbox"]').bind('change', function() {
    var alsoInterested = '';
    $('input[type="checkbox"]').each(function(index, value) {
        if (this.checked) {
            /*add*/ /*get label text associated with checkbox*/
            alsoInterested += ($('label[for="'+this.name+'"]').html() + ', ');
        }
    });
    if (alsoInterested.length > 0) {
        alsoInterested = alsoInterested.substring(0,alsoInterested.length-2);
    } else {
        alsoInterested = '';
    }

console.log(alsoInterested);
    
               var li = $('<li>'+alsoInterested+'<li/>').appendTo('#list');
            $("#ul").append(li);
});


$('li').click(function()
{
	alert('test');
});

	li
	{
	 float:left;
    width: auto;
    background: #ccc;
    margin:10px;
    display:inline-block;
    cursor: pointer;
}

li:hover::after {
    content: 'x';
    color: white;
    margin: 10px;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="bannanasChk" name="bannanasChk" value="N">
    <label for="bannanasChk" class="light">Bannanas</label>

    <input type="checkbox" id="carChk" name="carChk" value="N">
    <label for="carChk" class="light">Car Monkeys</label>
    
    <input type="checkbox" id="apesChk" name="apesChk" value="N">
    <label for="apesChk" class="light">Apes</label>
    
    <input type="checkbox" id="repairChk" name="repairChk" value="N">
    <label for="repairChk" class="light">Car Repair</label>
        <br>
        
        <ul class="list-unstyled" id="list">
       </ul>

Answer 1

如您所见，维护基于选中/未选中值的列表会很快变得不必要地复杂。

实现这一点的更简单的方法是在更改每个复选框时从选定的选项重新构建一个数组。然后，您可以使用此数组在您的 ul 中显示相关的 li 元素，如下所示：

$(':checkbox').on('change', function() {  
  var $list = $('#list').empty();
  var alsoInterested = $(':checkbox:checked').map(function() {
    var title = $(this).next('label').text();
    $(`<li>${title}</li>`).appendTo($list);
    return title;
  }).get();
  console.log(alsoInterested);    
});

li {
  float: left;
  width: auto;
  background: #ccc;
  margin: 10px;
  display: inline-block;
  cursor: pointer;
}

li:hover::after {
  content: 'x';
  color: white;
  margin: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="bannanasChk" name="bannanasChk" value="N">
<label for="bannanasChk" class="light">Bannanas</label>

<input type="checkbox" id="carChk" name="carChk" value="N">
<label for="carChk" class="light">Car Monkeys</label>

<input type="checkbox" id="apesChk" name="apesChk" value="N">
<label for="apesChk" class="light">Apes</label>    

<input type="checkbox" id="repairChk" name="repairChk" value="N">
<label for="repairChk" class="light">Car Repair</label><br />

<ul class="list-unstyled" id="list"></ul>

请注意，bind() 已经过时并且已被弃用。你应该改用on()，就像上面的例子一样。