Hey Amber

How are you currently adding the class?

If you are using jQuery you could always use closest – something like:

$(".someinput").on("change", function(){
    $(this).closest("li").toggleClass("active")
});

Thanks

Hey Amber

Although they don’t have the active class I’m assuming that the search form is correctly pre populated? As in, the checkboxes for those options are automatically selected?

In this case I think it would be easier to add classes based on this – so something like (untested):

$('.searchandfilter input[type=checkbox]:checked').each(function(){
    $(this).closest("li").toggleClass("active")
});

Basically this will go through all the checkboxes in the search form that are checked, and then apply the class to the nearest li.

Hope that helps!?

Hey Amber

I think I follow you, then you want to fire the above code whenever a form input is changed/updated – there would be a few ways to hook into it

One simple solution I think would be to hook in to the S&F js/ajax event (http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/):

//this event is fired when an ajax request starts - so in most cases this is when you submit the form, or change a field - but there might the smallest of delays before the class is applied
$(".searchandfilter").on("sf:ajaxstart",function(){
    $('.searchandfilter input[type=checkbox]:checked').each(function(){
        $(this).closest("li").addClass("active")
    });
});

The alternative would be to check when an input has changed – which would be instant – I guess better (but untested code) so..:

//when something is changed in a form
$(".searchandfilter input, .searchandfilter select").on("change",function(){
    $('.searchandfilter input[type=checkbox]:checked').each(function(){
        $(this).closest("li").addClass("active")
    });
});

Of course you would need to remove the active class on all your elements first before running the scripts above which only add the class you need

Hope that helps 🙂