Fastest Possible Way in jQuery to Filter "Radios + Select + Checkbox" Together Simultaneously

What is the Fastest strategy (in terms of Performance) to filter a combination of different type filters in jQuery?

In this example, I use "Radios + Select + Checkbox" and need them to operate together simultaneously.

I am targeting markers in a Leaflet map based on the:

• image's "src" e.g. img[src$="marker-icon.png"] (ends with file name)
• image's "class" e.g. img.variation

Speed on the filter is central as this map will be displaying hundreds and eventually thousands of marker images.

---

For the Radios, ("variation" class)... I have a change function:

jQuery(document).on("change", ".variation", function() {

For the Select, ("filterbottler" ID)... I have a second change function:

jQuery('#filterbottler').change(function(){

For the Checkbox, ("outages" ID)... I have a third change function:

jQuery('#outages').change(function(){

It was simple to make two of these change functions work in tandem using a bunch of IF statements and adjoined/chained classes (like img.variation.bottler which would be very slow)... but now that I've added a third filter, it seems like overload and it has now become very hard for me to wrap my brain around every single filtering scenario.

The demo, as of the time of this writing, features each of these three filters working independently... (ignore the last checkbox slider called "Show Bottler HQs" in the demo as that will continue to operate independently... I won't provide code for this one).

The goal is to get the first three filters (Variation, Bottler, & Outages) to simultaneously work together in the quickest and most efficient way possible. Can the jQuery experts here please help?

---

jQuery(document).ready(function($){

    // Filter 1) by Variation
    jQuery(document).on("change", ".variation", function() {
        var bottlerValue = jQuery("#filterbottler").find("option:selected").val();
        var bottlerClass = '.field-ccb-cached__'+bottlerValue;

        // marker groups to be used in exclusionary :not() statements so they aren't affected by the filters... e.g. marker-icon.png & marker-icon-2x.png are "My Location" markers
        var mainMarkers = '[src$="bottler_22px.png"],[src$="marker-icon.png"],[src$="marker-icon-2x.png"]';
        var includeOutageMarkers = '[src$="bottler_22px.png"],[src$="marker-icon.png"],[src$="marker-icon-2x.png"],[src$="cross_22px.png"]';

        if (this.id == "map-filters-show-all") {
            jQuery('.leaflet-marker-pane img:not('+mainMarkers+')').show(500);
        }
        else if (this.id == "map-filters-16oz-cans") {
            jQuery('.leaflet-marker-pane img:not('+includeOutageMarkers+',.field-report-variation__16oz-cans)').hide(500);
            jQuery('.leaflet-marker-pane img.field-report-variation__16oz-cans').show(500);
        } else if (this.id == "map-filters-12oz-cans") {
            jQuery('.leaflet-marker-pane img:not('+includeOutageMarkers+',.field-report-variation__12oz-cans)').hide(500);
            jQuery('.leaflet-marker-pane img.field-report-variation__12oz-cans').show(500);
        } else if (this.id == "map-filters-fountain-surge") {
            jQuery('.leaflet-marker-pane img:not('+includeOutageMarkers+',.field-report-variation__fountain-surge)').hide(500);
            jQuery('.leaflet-marker-pane img.field-report-variation__fountain-surge').show(500);
        } else if (this.id == "map-filters-fountain-surge-red-berry-blast") {
            jQuery('.leaflet-marker-pane img:not('+includeOutageMarkers+',.field-report-variation__fountain-surge-red-berry-blast)').hide(500);
            jQuery('.leaflet-marker-pane img.field-report-variation__fountain-surge-red-berry-blast').show(500);
        }
    });

    // Filter 2) by Bottling Company (select box)
    jQuery('#filterbottler').change(function(){
        var bottlerValue = jQuery("#filterbottler").find("option:selected").val();
        var bottlerClass = '.field-ccb-cached__'+bottlerValue;

        if (bottlerClass != '.field-ccb-cached___none') {
            jQuery('.leaflet-marker-pane img:not([src$="bottler_22px.png"],[src$="marker-icon.png"],[src$="marker-icon-2x.png"],[src$="cross_22px.png"],'+bottlerClass+')').hide(500);
            jQuery('.leaflet-marker-pane img'+bottlerClass).show(500);
        }
        if (bottlerClass === '.field-ccb-cached___none') {
            jQuery('.leaflet-marker-pane img:not([src$="bottler_22px.png"],[src$="marker-icon.png"],[src$="marker-icon-2x.png"])').show(500);
        }

    });

    // Filter 3) Show Outage Reports (checkbox on/off)
    jQuery('#outages').change(function(){
        if(this.checked){
            jQuery('.leaflet-marker-pane img[src$="cross_22px.png"],[src$="exclamation_22px.png"]').fadeToggle(500);
            jQuery.cookie('outagemarkers', true);
        }
        else {
            jQuery('.leaflet-marker-pane img[src$="cross_22px.png"],[src$="exclamation_22px.png"]').fadeToggle(500);
            jQuery.cookie('outagemarkers', false);
        }
    });

from Fastest Possible Way in jQuery to Filter "Radios + Select + Checkbox" Together Simultaneously