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.