Jqueryチェックボックスフィルタ

Question

特定のチェックボックスがオンになっているかどうかによって、リスト項目をフィルタリングしようとしています。

私はフィルタリングがうまくいくように管理していますが、私はページロード時にすべてのリスト項目を削除するのに苦労しています。

「リストの項目」 'オプションのチェックボックスをそれまでは表示しないが

をckeckedているためのアイデアを、私はオンライン私の作業バージョンを配置している。ここでhttp://dev.perfectdaycanada.com/filter/

缶誰にも高度にありがとう私を助けてください、それは非常に感謝しています。

---

フィルタリングのためのjavascript：

$(document).ready(function(){ 
    $("input.type_check").attr("checked", "").click(function() { 
     if($(this).is(':checked')) { 
      $("#case-studies li."+$(this).attr('id')).removeClass('type_hidden'); 
      $("#case-studies li").not(".type_hidden, .start_hidden").slideDown(); 
     } else { 
      $("#case-studies li."+$(this).attr('id')).addClass('type_hidden'); 
      $("#case-studies li."+$(this).attr('id')).slideUp(); 
     } 
    }); 

    $("input.start_check").attr("checked", "").click(function() { 
     if($(this).is(':checked')) { 
      $("#case-studies li."+$(this).attr('id')).removeClass('start_hidden'); 
      $("#case-studies li").not(".type_hidden, .start_hidden").slideDown(); 
     } else { 
      $("#case-studies li."+$(this).attr('id')).addClass('start_hidden'); 
      $("#case-studies li."+$(this).attr('id')).slideUp(); 
     } 
    }); 
}); 

---

HTML：

<div> 
    <input name="action-areas[]" type="checkbox" id="areas_crop_initiatives" value="0" class="type_check" checked="checked" /> 
    <label for="areas_crop_initiatives">Crop initiatives</label> 
</div> 
<div> 
    <input name="action-areas[]" type="checkbox" id="areas_managment" value="1" class="type_check" checked="checked" /> 
    <label for="areas_managment">Management</label> 
</div> 
<div> 
    <input name="action-areas[]" type="checkbox" id="areas_assurance" value="2" class="type_check" checked="checked" /> 
    <label for="areas_assurance">Assurance/certification</label> 
</div> 
<div> 
    <input name="action-areas[]" type="checkbox" id="areas_environmental" value="3" class="type_check" checked="checked" /> 
    <label for="areas_environmental">Environmental management</label> 
</div> 
<div> 
    <input name="action-areas[]" type="checkbox" id="areas_biodiversity" value="4" class="type_check" checked="checked" /> 
    <label for="areas_biodiversity">Biodiversity</label> 
</div> 
<div> 
    <input name="action-areas[]" type="checkbox" id="areas_staff" value="5" class="type_check" checked="checked" /> 
    <label for="areas_staff">Staff</label> 
</div> 
<div> 
    <input name="action-areas[]" type="checkbox" id="areas_community" value="6" class="type_check" checked="checked" /> 
    <label for="areas_community">Community</label> 
</div> 


<ul id="case-studies"> 
    <li id="event_1768" class="ethics_agrochemical_usage ethics_input_costs farms_potatoes areas_crop_initiatives">– Potatoes, Poland</li> 
    <li id="event_2190" class="ethics_hcvl farms_beef areas_community areas_managment countries_austria">– Beef, Ireland</li> 
    <li id="event_2191" class="ethics_air_emissions farms_tomatoes areas_assurance countries_austria">– Tomatoes, Portugal</li> 
</ul> 

Answer 1

はちょうどこのようなあなたのリスト項目にクラスtype_hiddenを追加します。

<li id="event_1768" class="other classes type_hidden">– Potatoes, Poland</li> 

（もちろん、すべてのリスト項目より）