javascript - 想要从 jquery 列表中删除取消选中的复选框值

Question

这个问题已经有答案了:

jQuery get values of checked checkboxes into array (9 个回答)

已关闭 5 年前。

当我选中任何一个复选框时，我会得到 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() 来代替，如上面的示例所示。