Want to remove the uncheck checkbox value from the list in jquery

Question

When I check on any of the checkbox I get the value in li, if I uncheck the first checkbox and then check the second checkbox, I want to remove the text/value of the first check box as show below :

enter image description here

Below is my code :

$('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>

No matter `array` or `value` if you look at that topic or similar, you find the solution. — Pedram, Jan 09 '18 at 11:30

score 1 · Accepted Answer · answered Jan 09 '18 at 11:12

As you've seen, maintaining a list based on checked/unchecked values becomes needlessly complex rather quickly.

A much simpler way to achieve this is to simply re-build an array from the selected options upon change of each checkbox. You can then use this array to show the relevant li elements within your ul, something like this:

$(':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>

Note that bind() is very outdated and has been deprecated. You should use on() instead, as per the above example.

Thanks Rory McCrossan, I tried this https://stackoverflow.com/questions/42717006/remove-li-element-when-checkbox-is-unchecked It's something similar to my requirement. — Kamlesh Katpara, Jan 09 '18 at 11:18

Want to remove the uncheck checkbox value from the list in jquery

1 Answers1