从动态数组中删除项目

Question

I have some lists and checkboxes which work as filters, what I need to do is when you select a checkbox is to add that value to a small tag next to the title and when uncheck then remove that value.

I am making this work, saving each value into an array and when uncheck try to look for the index of that value and remove, but I think I have a conflict with the positions in the array. If you click one by one and then remove one by one then it works but if you click all of them and uncheck only the first one, it removes everything. Have a clue how to solve it but not sure how to proceed.

Any help please? https://jsfiddle.net/panconjugo/qsgwvp63/2/

$(function() {
  $(".filter-nav > li").each(function(index) {
    var brands = [];
    $(this).find("input:checkbox").each(function(index) {
      $(this).on("click", function() {
        if ($(this).is(":checked")) {
          console.log("adding: " + index);
          brands.push($(this).val());
          console.log(brands);
          $(this).parent().parent().prev().find(".selected-group").text(brands.join(", "));
        } else {
          console.log("removing:" + index);
          brands.splice(index);
          console.log(brands);
          $(this).parent().parent().prev().find(".selected-group").text(brands.join(", "));
        }
      });
    });
  });
});

Answer 1

change the code brands.splice(index); to brands.splice(brands.indexOf($(this).val()), 1);

first you have to find the item index from the array then use that index to remove from the array

Answer 2

Instead of maintaining an array by adding/removing items, it is much, much simpler to hook to the change event of the checkboxes and then build a new array using map() which contains the data of the selected items in that group. You can then join this together and display the text as needed. Try this:

 $('.filter-nav input:checkbox').on("change", function() { var $parent = $(this).closest('.filter-nav > li'); var items = $parent.find('input:checkbox:checked').map(function() { return this.value; }).get(); $parent.find('.selected-group').text(items.join(', ')); }); 

 .filter-nav { list-style: none; padding: 0; } .filter-nav li { line-height: 40px; } .filter-nav > li > h3 { background-color: #222; color: white; padding-left: 20px; cursor: pointer; } .selected-group { color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="filter-nav"> <li> <h3>Brand <small class="selected-group"></small></h3> <ul> <li> <label for="brand1">Brand1</label> <input type="checkbox" id="brand1" value="Brand 1"> </li> <li> <label for="brand1">Brand2</label> <input type="checkbox" id="brand2" value="Brand 2"> </li> <li> <label for="brand1">Brand3</label> <input type="checkbox" id="brand3" value="Brand 3"> </li> </ul> </li> <li> <h3>Size <small class="selected-group"></small></h3> <ul> <li> <label for="xs">XS</label> <input type="checkbox" id="xs" value="xs"> </li> <li> <label for="m">M</label> <input type="checkbox" id="m" value="m"> </li> <li> <label for="l">L</label> <input type="checkbox" id="l" value="l"> </li> </ul> </li> <li> <h3>Color <small class="selected-group"></small></h3> <ul> <li> <label for="blue">Blue</label> <input type="checkbox" id="blue" value="blue"> </li> <li> <label for="green">Green</label> <input type="checkbox" id="green" value="green"> </li> <li> <label for="red">Red</label> <input type="checkbox" id="red" value="red"> </li> </ul> </li> </ul>