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

由于两个复选框都是相关的，因此您需要从具有两个类的行中单独处理单个类的情况：

这是一个工作小提琴

$('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

选中男性时，您需要省略快速课程。

( ".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。

根据设置

2 个答案: