jQueryはチェックボックスに複数の値を表示しない

Question

私は7つのチェックボックスにすべて異なるIDを使用しています。 div内のデータメソッドが含まれているIDの通信者。チェックボックスをクリックすると、対応するID以外のすべてのdivが非表示になります。

この瞬間に動作します！しかし、複数のチェックボックスを選択すると、すべてのdivが消えます。私はそれがすべて選択されたID年代に耳を傾けるように、私はこのスクリプトを最適化する方法だろ

<script type="text/javascript"> 
jQuery('.filter_methode input').change(function() 
    { 
     jQuery('.featured-item-container').show(); 
     jQuery('input').each(function() 
      { 
      var Checked; 
      if(Checked = jQuery(this).attr('checked')) 
       { 
        jQuery(".featured-item-container:not([data-methode='" + this.id + "'])").hide(); 
       }; 
     }); 
    }); 
</script> 

：

は、これが私のjavascriptのです。私はそれが唯一のデータ-Methodeの= "methode_1" とdivを私に示していmethode_1 IDでのチェックボックスをクリックしますので

<div class="filter_methode"> 
<label><input type="checkbox" name="methode_1" id="methode_1" /> 
Methode 1</label> 

<label><input type="checkbox" name="methode_2" id="methode_2" /> 
Methode 2</label> 

<label><input type="checkbox" name="methode_3" id="methode_3" /> 
Methode 3</label> 

<label><input type="checkbox" name="methode_4" id="methode_4" /> 
Methode 4</label> 

<label><input type="checkbox" name="methode_5" id="methode_5" /> 
Methode 5</label> 


<label><input type="checkbox" name="methode_6" id="methode_6" /> 
Methode 6</label> 


<label><input type="checkbox" name="methode_7" id="methode_7" /> 
Methode 7</label> 

<label><input type="checkbox" name="methode_8" id="methode_8" /> 
Methode 8</label> 

<div class="featured-container col-md-12"> 
    <div class="row"> 
     <div class="featured-item-container" data-methode="methode_1"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_1"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_1"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_3"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_7"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_8"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_2"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_4"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_8"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_5"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_6"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_5"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_1"> 
      Some text and image in here 
     </div> 
     <div class="featured-item-container" data-methode="methode_2"> 
      Some text and image in here 
     </div> 
    </div> 
</div> 

：ここで編集

はHTMLですしかし、methode_1とmethode_2のdivを表示する代わりに、methode_2のチェックボックスをクリックすると、すべてのdivが消えます。

Answer 1

は、今私はここにコードを持っていることのソリューションです：

jQuery('.filter_methode input').change(function() 
    { 
     jQuery('.featured-item-container').hide(); 
     jQuery('input').each(function(k,v) 
      { 
      var Checked = $(v).prop("checked"); 
      if(Checked) 
       { 
        jQuery(".featured-item-container[data-methode='" + v.id + "']").show(); 
       }; 
     }); 
     if(jQuery('input:checked').length == 0) { 
      jQuery('.featured-item-container').show(); 
     } 
    }); 

ない「これは」匿名関数ではありません。 2番目のパラメータでオブジェクトにアクセスできます。

ここをクリックしてください：https://jsfiddle.net/92u6u72L/3/