conditional display of table row based on settings

Question

So I have a number of checkboxes that toggle table rows show/hide based on the classes each row has.

HTML:

GENDER: 
<label><input name="male" type="checkbox" id="male" checked> Male</label>
<label><input name="female" type="checkbox" id="female" checked> Female</label>
<br>
Subject: 
<label><input name="form" type="checkbox" id="form" checked> Form</label>
<label><input name="english" type="checkbox" id="english" checked> English</label>
<label><input name="maths" type="checkbox" id="maths" checked> Maths</label>
<label><input name="science" type="checkbox" id="science" checked> Science</label>
<br>
Competence: 
<label><input name="slow" type="checkbox" id="slow" checked> Slow</label>
<label><input name="normal" type="checkbox" id="normal" checked> Normal</label>
<label><input name="fast" type="checkbox" id="fast" checked> Fast</label>

<table>
  <tr class="row male form slow"><td>content</td></tr>
  <tr class="female english normal"><td>content</td></tr>
  <tr class="female maths normal"><td>content</td></tr>
  <tr class="male science fast"><td>content</td></tr>
</table>

jQuery:

$( "#male" ).change(function() {
    if ( $( this ).prop( "checked" ) == true ) $( ".male" ).fadeIn();
    if ( $( this ).prop( "checked" ) == false ) $( ".male" ).fadeOut();
}).change();
$( "#female" ).change(function() {
    if ( $( this ).prop( "checked" ) == true ) $( ".female" ).fadeIn();
    if ( $( this ).prop( "checked" ) == false ) $( ".female" ).fadeOut();
}).change();
$( "#form" ).change(function() {
    if ( $( this ).prop( "checked" ) == true ) $( ".form" ).fadeIn();
    if ( $( this ).prop( "checked" ) == false ) $( ".form" ).fadeOut();
}).change();
$( "#english" ).change(function() {
    if ( $( this ).prop( "checked" ) == true ) $( ".english" ).fadeIn();
    if ( $( this ).prop( "checked" ) == false ) $( ".english" ).fadeOut();
}).change();
$( "#maths" ).change(function() {
    if ( $( this ).prop( "checked" ) == true ) $( ".maths" ).fadeIn();
    if ( $( this ).prop( "checked" ) == false ) $( ".maths" ).fadeOut();
}).change();
$( "#science" ).change(function() {
    if ( $( this ).prop( "checked" ) == true ) $( ".science" ).fadeIn();
    if ( $( this ).prop( "checked" ) == false ) $( ".science" ).fadeOut();
}).change();
$( "#slow" ).change(function() {
    var $input = $( this );
    if ( $input.prop( "checked" ) == true ) $( ".slow" ).fadeIn();
    if ( $input.prop( "checked" ) == false ) $( ".slow" ).fadeOut();
}).change();
$( "#normal" ).change(function() {
    var $input = $( this );
    if ( $input.prop( "checked" ) == true ) $( ".normal" ).fadeIn();
    if ( $input.prop( "checked" ) == false ) $( ".normal" ).fadeOut();
}).change();
$( "#fast" ).change(function() {
    var $input = $( this );
    if ( $input.prop( "checked" ) == true ) $( ".fast" ).fadeIn();
    if ( $input.prop( "checked" ) == false ) $( ".fast" ).fadeOut();
}).change();

I have it all working fine except for one thing: if I toggle the 'male' off, then toggle the 'fast' off and then toggle 'male' back on the middle row displays when it shouldn't, because it is also toggled off for 'fast'. I understand why it does this but I can't get it to stay hidden until both toggles are on.

I've tried getting row ids and working from there but keep falling short.

Any wisdom would be great because I'm stuck.

Answer 1

Since both checkboxes are related, you need to handle the case of single class separately from a row having both classes:

Here is a working fiddle

$('input[type=checkbox]').change(function(){


  var male = $("#male").is(":checked");
  var fast = $("#fast").is(":checked");
  
  if(male)
  {
      $( ".male" ).not('.fast').fadeIn();
  }
  else
  {
       $( ".male" ).not('.fast').fadeOut();
  }
  
  if(fast)
  {
      $( ".fast" ).not('.male').fadeIn();
  }
  else
  {
       $( ".fast" ).not('.male').fadeOut();
  }
  
  if(fast && male)
  {
       $( ".male.fast" ).fadeIn();
  }
  else
  {
      $( ".male.fast" ).fadeOut();
  }
  
});

.male
{
  color:red;
  }

.fast
{
  color:blue;
  }


.male.fast
{
  color:green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input name="male" type="checkbox" id="male" checked> Male</label>
<label><input name="fast" type="checkbox" id="fast" checked> Fast</label>

<table>
  <tr class="male"><td>content1 male</td></tr>
  <tr class="fast"><td>content2 fast</td></tr>
  <tr class="male fast"><td>content3 male fast</td></tr>
  <tr class="male"><td>content4 male</td></tr>
  <tr class="fast"><td>content5 fast</td></tr>
  <tr class="male fast"><td>content6 male fast</td></tr>
  <tr class="fast"><td>content7 fast</td></tr>
</table>

Answer 2

You need to omit the fast class when Male is checked.

( ".male:not(.fast)" ).fadeIn();

But you also need to check and see if the Fast checkbox is checked before omitting the fast class.

$("#male").change(function() {
  if ($(this).prop("checked")) {
    if ($("#fast").prop("checked")) {
      $(".male").fadeIn();
    } else {
      $(".male:not(.fast)").fadeIn();
    }
  }
  if (!$(this).prop("checked")) $(".male").fadeOut();
}).change();
$("#fast").change(function() {
  if ($(this).prop("checked")) {
    if ($("#male").prop("checked")) {
      $(".fast").fadeIn();
    } else {
      $(".fast:not(.male)").fadeIn();
    }
  }
  if (!$(this).prop("checked")) $(".fast").fadeOut();
}).change();

Here is a Fiddle Demo.