Q:

Filtering multiple classes with checkboxes

I've created a Multiple Checkbox Filter where there are 2 filter options: Gender and State
What I want to achieve is:
Filter the elements that have AT LEAST one of the STATE categories, but as soon as the GENDER is checked, hide the elements that are not from that gender
So for example, I am filtering by standing AND walking (this shows all female and male standing and walking), but as soon as I check MALE, this has to hide all females, so it'll show all male standing and walking.

function run() {
    $(".item").hide();
    const checked = $(":checked");
    var gender = $("[name='gender']:checked").val();
    var state = $("[name='state']:checked").val();
    
    if (checked.length === 0) {
        return $(".item").show();
    }
    checked.each(function() {
        //$(".item." + this.id).show(); //Works, but it doesn't hide the non checked gender
        return $(this).hasClass(gender) || $(".item." + this.state);
    }).show();
};  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div id="gender">
  <input type="radio" id="male" name="gender" onclick="run()" /> Male
  <input type="radio" id="female" name="gender" onclick="run()" /> Female
</div>
<div id="state">
  <input type="checkbox" id="walking" name="state" onclick="run()" /> Walking
  <input type="checkbox" id="standing" name="state" onclick="run()" /> Standing
</div>

<br/>
<div class="item male walking" >male walking</div>
<div class="item male standing walking">male standing and walking</div>
<div class="item standing female walking">female standing and walking</div>
<div class="item female walking">female walking</div>

A:

You can do it like this: gather the checked items, and for each of them query the DOM for their names and show them.
Note that this is fairly inefficient because you are querying the DOM multiple times for the same elements. You should ideally save the elements collections and just call show/hide them when needed.
Also, note that I added the labels to improve the UX of your input elements. Now you can click on the labels themselves to check the inputs.

Edit: If inputs are supposed to be mutually exclusive, a radio buttons is a better fit. I have changed the UI to use radio buttons and added a box to reset the button (do not filter for gender). I am not sure how the male+female is supposed to work. At the moment, it is not included in neither gender.

function run() {
  $(".item").hide();
  let opposingGender = '';
  $(":checked").each(function() {
    let selector = '.' + this.value;
    if (this.name === 'gender') {
      opposingGender = ':not(.' + (this.value === 'male' ? 'female' : 'male') +')';
    }
    selector += opposingGender;
    $(selector).show();
  });
};

function unselect() {
  $('[name=gender]').prop('checked', false);
  run();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div id="gender">
  <input type="radio" id="male" value="male" name="gender" onclick="run()" /> <label for="male">Male</label>
  <input type="radio" id="female" value="female" name="gender" onclick="run()" /> <label for="female">Female</label>
  <button onclick="unselect()">Unselect</button>
</div>
<div id="state">
  <input type="checkbox" id="walking" value="walking" name="state" onclick="run()" /> <label for="walking">Walking</label>
  <input type="checkbox" id="standing" value="standing" name="state" onclick="run()" /> <label for="standing">Standing</label>
</div>

<br/>
<div class="item male walking" >male walking</div>
<div class="item male standing walking">male standing and walking</div>
<div class="item standing female walking">female standing and walking</div>
<div class="item female walking">female walking</div>
<div class="item male female standing">male+female standing</div>

