jquery - 根据设置有条件显示表格行

Question

因此，我有许多复选框，可以根据每行所具有的类来切换表行的显示/隐藏。

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();

我一切正常，除了一件事:如果我关闭“男性”，然后关闭“快速”，然后在不应该的情况下将“男性”切换回中间行显示，因为它也被切换为“快速”。我明白它为什么这样做，但在两个开关都打开之前我无法让它保持隐藏状态。

我尝试过获取行 ID 并从那里开始工作，但始终未能成功。

任何智慧都会很棒，因为我被困住了。

Answer 1

选中 Male 时，需要省略 fast 类。

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

但是在忽略快速类之前，您还需要检查快速复选框是否已选中。

$("#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();

这是一个Fiddle Demo .