With a UNCHECKED checkbox, how to filter out NSFW tagged divs to be hidden at all times but when checked ON, to follow the visibility rules?

The code is overly complex, and hard to follow. For one, this bit

        var v = this.value;
        if (selectedFilters.indexOf(v) === -1 && v)
            selectedFilters.push(v);

merely serves to avoid duplicates in the array. This means that it is more like a set, which is a data structure that avoids duplicates by itself. If you do selectedFilters = new Set(), then that entire block can be replaced by selectedFilters.add(this.value);

Queries "is this category contained in the selected filters" can then also be reduced from selectedFilters.indexOf(cat) === -1 to selectedFilters.has(cat). That way the code already starts to match much more the desired behaviour.

Furthermore, the single-letter variables should also be abolished, and be replaced by explanatory names. The code should also have more comments to explain what's going on.

Then there is the confusion of being able to select filters from both the menu and the checkboxes. I'm not sure how this should work, so I've just changed the code such that it groups them all together: a filter is active when it's either selected by the checkbox or the menu.

Finally there is the problem that the "NSFW allowed" is not really the same as filtering of the other categories. Because of that, I just created a separate variable for it, and removed it from the filter. And finally finally I added an extra call to filterFunc() so that things start out filtered (instead of waiting for the first change to the filter checkboxes/menus). This is the end result.

EDIT: Updated for the "MVP only" checkbox.

EDIT 2: Don't let the "MVP" checkbox show everything with the MVP tag.

EDIT 3: Flipped the condition to show items; they need all the tags now. The old code is left commented-out, so that anyone can revert this switch for themselves if they want.

var $filterCheckboxes = $('input[type="checkbox"]');
var $filtermenus = $('.grid1');


// Return the intersection of setA and setB.
// Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
function intersection(setA, setB) {
    let _intersection = new Set()
    for (let elem of setB) {
        if (setA.has(elem)) {
            _intersection.add(elem)
        }
    }
    return _intersection
}
function isSuperset(set, subset) {
    for (let elem of subset) {
        if (!set.has(elem)) {
            return false
        }
    }
    return true
}


function filterFunc() {
    var selectedFilters = new Set();

    // Gather tags from the menus.
    $filtermenus.find(":selected").each(function () {
        if (this.value)
            selectedFilters.add(this.value);
    });
    // Gather tags from the checkboxes.
    $filterCheckboxes.filter(':checked').each(function () {
        if (this.value)
            selectedFilters.add(this.value);
    });
    console.log("selected filters:", [...selectedFilters]);
 
    let mayShowNSFW = selectedFilters.has("NSFW");
    selectedFilters.delete("NSFW");
  
    let mustShowMVPOnly = selectedFilters.has("MVP");
    selectedFilters.delete("MVP");

    $('.filterDiv')
        .hide()
        .filter(
            // Returns 'true' to show items, 'false' to hide them.
            function (_, element) {
                let itemCats = new Set($(element).data('category').split(' '));

                // If the item has tag 'showAll', always show it.
                if (itemCats.has("showAll"))
                    return true;
                
                // If item is NSFW but that's not in the filters, hide the item
                // regardless of other tags.
                if (itemCats.has("NSFW") && !mayShowNSFW)
                    return false;
                
                if (mustShowMVPOnly && !itemCats.has("MVP"))
                    return false;
                
                // If there are no filters at all, just show everything.
                if (selectedFilters.size == 0)
                    return true;

                // If this item has all the tags, show it:
                return isSuperset(itemCats, selectedFilters);
              
                // If this item has any of the tags, show it:
                // return intersection(selectedFilters, itemCats).size > 0;
            })
        .show();
}

$filterCheckboxes.on('change', filterFunc);
$('select').on('change', filterFunc);
filterFunc();

You can add this in your css stylesheet

.nsfw{
    visibility: hidden;
}

And this should be in the head tag of your html page

<script>
        $(document).ready(function () {
            $('#nsfw').change(function () {
                if (!this.checked)
                    //  ^
                    $('.nsfw').css('visibility', 'hidden');
                else
                    $('.nsfw').css('visibility', 'visible');
            });
        });
</script>

Your nsfw box should be something like this

<div class="filterDiv nsfw" data-category="yellow NSFW MVP" style="background-color: yellow">Tags: <br />yellow
            <br />NSFW<br />MVP
</div>

Here is the checkbox

<div>
        <label>Display NSFW material also
            <input type="checkbox" value="NSFW" id="nsfw" />
            <span class="checkmark"></span>
        </label>
    </div>

You can give a class to all nsfw images and then set their visibility to hidden in css. and when checkbox is checked you can set nsfw images visibility to hidden.