jQuery to hide specific table rows using multiple checkboxes as filters and custom attributes

The best way to do this kind of thing is to have a single "update" function that figures out which rows should be visible, which should not be visible, and applies those styles (this is close to how it would work in something like ReactJS too). Here's an example of how to do that.

I've altered your checkboxes so it's easy to tell in code which ones are for race and which are for gender:

<div class="column right">
   <div><b>Filters</b></div>
   <div><b>Gender</b></div>
   <div><input type="checkbox" class="gender" value="male">Male</input></div>
   <div><input type="checkbox" class="gender" value="non-binary">Non-Binary</input></div>
   <div><b>Race</b></div>
   <div><input type="checkbox" class="race" value="sith">Sith</input></div>
   <div><input type="checkbox" class="race" value="human">Human</input></div>
   <div><input type="checkbox" class="race" value="unknown">Unknown</input></div>
   <div><input type="checkbox" class="race" value="droid">Droid</input></div>
</div>

Now we attach a listener so that we update all the table rows whenever a checkbox changes:

$("input").on("click", updateRows );

function updateRows() {
    $("table tr").each( function() {
        var $row = $(this);
        updateRow( $row );
    });
}

function updateRow( $row ) {
    var gender = $row.attr("gender");
    var race = $row.attr("race");
    var visibility = isGenderVisible( gender ) && isRaceVisible( race );
    $row.css("visibility", visibility ? "visible": "hidden");
}

function isGenderVisible( gender ) {
    var gendersChecked = $("input.gender").map( function() {
        if ( this.checked ) return this.value;
    });
    if ( gendersChecked.length === 0 ) return true;
    if ( gendersChecked.length === 1 ) return gender === gendersChecked[0];
    return false;
}

function isRaceVisible( race ) {
    var racesChecked = $("input.race").map( function() {
        if ( this.checked ) return this.value;
    });
    if ( racesChecked.length === 0 ) return true;
    if ( racesChecked.length === 1 ) return race === racesChecked [0];
    return false;
}

Duncan Thacker's answer describes the general approach quite accurately, but as I had already finished my working example, here you go... I also think that my approach is a bit easier to grasp and less bloated with different functions for each filter, but it might be a bit too simplistic and need to be extended, depending on what future filter mechanisms you might have that exceed this simple code example.

var tableRows = $('.column.left tbody tr'),
    filterBoxes = $('.column.right :checkbox').on('change', filterTable);

function filterTable() {
  var filter_selector = '';
  $('.column.right :checked').each(function() {
    filter_selector += '[' + $(this).attr('name') + '=' + '"' + $(this).val() + '"]';
  });
  if (filter_selector.length < 1) {
    tableRows.show();
  } else {
    tableRows.hide().filter(filter_selector).show();
  }
}

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px; }
tr:nth-child(even){background-color: #f2f2f2}
th { background-color: #0099ff; color: white; }
table, th, td { border: 1px solid black; }
* { box-sizing: border-box; }
body { margin: 0; }
.column {
    float: left;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}
.left { width: 75%; }
.right { width: 25%; }
.row:after {
    content: "";
    display: table;
    clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column left">
<table>
	<thead>
		<th>Name</th>
		<th>Occupation</th>
		<th>Gender</th>
		<th>Race</th>
	</thead>
	<tbody>
		<tr gender="male" race="sith">
			<td>Darth Vader</td>
			<td>Dark Lord of the Sith</td>
			<td>Male</td>
			<td>Sith</td>
		</tr>
		<tr gender="male" race="human">
			<td>Boba Fett</td>
			<td>Bounty Hunter</td>
			<td>Male</td>
			<td>Human</td>
		</tr>
		<tr gender="male" race="unknown">
			<td>Yoda</td>
			<td>Jedi Master</td>
			<td>Male</td>
			<td>Unknown</td>
		</tr>
		<tr gender="non-binary" race="droid">
			<td>R2D2</td>
			<td>Astromech Droid</td>
			<td>Non-Binary</td>
			<td>Droid</td>
		</tr>		
	</tbody>
</table>
</div>
<div class="column right">
<div><b>Filters</b></div>
<div><b>Gender</b></div>
<div><input type="checkbox" name="gender" value="male">Male</input></div>
<div><input type="checkbox" name="gender" value="non-binary">Non-Binary</input></div>
<div><b>Race</b></div>
<div><input type="checkbox" name="race" value="sith">Sith</input></div>
<div><input type="checkbox" name="race" value="human">Human</input></div>
<div><input type="checkbox" name="race" value="unknown">Unknown</input></div>
<div><input type="checkbox" name="race" value="droid">Droid</input></div>
</div>