Jquery check box filter

Question

I am attemting to filter list items depending on whether certain checkboxes are checked or not.

I have managed to get the filtering to work but I am struggling to remove all list items on page load.

The idea is for 'list items' not to display untill the 'options' checkboxes are ckecked

I have placed my working version online here http://dev.perfectdaycanada.com/filter/

Thank you in advanced to anyone who can help me, it's much appreciated.

The javascript for filtering:

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

Veger · Accepted Answer · 2011-08-11 15:53:55Z

3

Just add the class type_hidden to your list items like this:

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

(and than for all list items of course)

answered Aug 11, 2011 at 15:53

Veger

38k11 gold badges110 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

perfectday Over a year ago

Thanks for your promt reply. I added the class 'type_hidden' to all list items but unfortunately they still display on page load. Any other suggestions? Thanks dev.perfectdaycanada.com/filter

Veger Over a year ago

I cannot seem to find your type_hidden CCS style anywhere, are you sure you defined it somewhere? If I add it to your document, I works for me.

Collectives™ on Stack Overflow

Jquery check box filter

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related