私は何をする必要があるか、フィルタとしての仕事いくつかのリストとチェックボックスを持っている動的配列

Question

から項目を削除するには、チェックボックスを選択した場合であるタイトルとするときのチェックを外し横に小さなタグにその値を追加することで、そのを削除値。

私は、この作品を作る配列にそれぞれの値を保存したときにチェックを外し試みは、その値のインデックスを探して削除するには、私は、私は、配列内の位置との競合があると思うのです。あなたは一つ一つをクリックして、一つ一つを削除した場合、それは動作しますが、あなたがそれらのすべてをクリックして、最初のものだけをオフにした場合、それはすべてを削除します。それを解決する方法を手がかりにしていますが、進める方法がわかりません。

お願いします。 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イベントにフックした後、選択されたのデータを含むmap()を使用して新しいアレイを構築するために、はるかに簡単であり、多くのそのグループのアイテム。これを一緒に結合し、必要に応じてテキストを表示することができます。これを試してみてください：

$('.filter-nav input:checkbox').on("change", function() { 
 
    var $parent = $(this).closest('.filter-nav > li'); 
 
    var items = $parent.find('input:checkbox:checked').map(function() { 
 
    \t 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>

Answer 2

変更コードbrands.splice(index);最初のあなたは、配列から項目のインデックスを見つける必要があり

brands.splice(brands.indexOf($(this).val()), 1);に、配列から削除し、そのインデックスを使用し