Accepted answer

The reason why no matches remain when you check both is that you generate filters that contain contradictory conditions. For instance, it would generate 3 selectors like this:


Each one is saying that the attribute should contain both words at the same time. This is not what you were after. Instead, I think you want to perform this logic (in pseudo language):

([data-staralt~='4.5'] or [data-cat~='4'] or [data-star~='4']) AND
([data-staralt~='category'] or [data-cat~='Ramen'] or [data-star~='Ramen'])

This you can achieve with the following code. Side note: don't use the deprecated delegate jQuery method, but the on method (which has its first two parameters reversed):

$(document).on('change', 'input[type=checkbox]', function() {
    var $list = $('.leaflet-zoom-animated > g > circle'),
        $checked = $('input:checked');  
    if ($checked.length) {                          
        $($checked).each(function(index, element){
            // Reduce list to what matches one of the three filters.
            // The comma in the selector works as a logical OR:
            $list = $list.filter("[data-staralt~='" + + "'],[data-cat~='" + element.value + "'],[data-star~='" + element.value + "']");
    // Show what remains in list:


After our conversion, I have the impression you need the following logic:

([data-staralt~='4.5'] or [data-staralt~='3.5']) and 
([data-cat~='4'] or [data-cat~='3']) and 
([data-star~='4'] and [data-star~='3])

I also came to understand the reason for staralt, i.e. to include 3.5 also when 3 is selected. But this you can do with the ^= comparison. So I would do that instead of the extra name attribute check.

So that leads to the following code:

function createFilter(type) { // Helper function
    var filter = [];
    $("#" + type + '-filter input:checked').each(function(index, element) {
        filter.push("[data-" + type + "^='" + element.value + "']"); // Use ^= to match the start of the actual value
    return filter.join(",") || "*"; // Asterisk means: no filter at all

$(document).on('change', 'input[type=checkbox]', function() {
    $('.leaflet-zoom-animated > g > circle')
        .filter(createFilter("star")) // Any of the checked star selections, AND
        .filter(createFilter("review")) // Any of the review selections, AND
        .filter(createFilter("cat")) // Any of the cat selections
        .show(); // Show the matches of the above filter

Related Query