隐藏带有多个复选框的行

Question

我有一个 HTML table，我想在其中 hide/show 行基于多个复选框。

选中复选框时，（基于文本标准）某些行会隐藏，如果未选中，则会显示所有行。如果选中 2 个或更多复选框，则所有行都将隐藏，但符合所有选定复选框条件的行除外。但是，如果我取消选中任何复选框，则会显示所有行。

我的问题是，当我取消选中其中一个复选框时，如何才能仅显示所有当前选中的复选框中符合条件的行？

为了更好地理解，我需要检查哪些行已被其他复选框隐藏，并且在未选中复选框时不显示它们。

工作案例示例： checkbox1 和 checkbox2 被选中：只显示 row1，如果我取消选中 checkbox2，则必须只显示 row1 和 row3

HTML:

<label><input type="checkbox" id="checkbox1">Teacher</label>
<label><input type="checkbox" id="checkbox2">Tennis</label>
<label><input type="checkbox" id="checkbox3">Married</label>

    <table id="table" border="1">
    <thead>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Profession</th>
        <th>Hobby</th>
        <th>Married</th>
    </thead>
    <tbody>
    <tr id="row1">
      <td>John</td>
      <td>Doe</td>
      <td>Teacher</td>
      <td>Tennis</td>
      <td>Yes</td>
    </tr>
    <tr id="row2">
      <td>Eve</td>
      <td>Jackson</td>
      <td>Doctor</td>
      <td>Darts</td>
      <td>No</td>
    </tr>
    <tr id="row3">
      <td>Adam</td>
      <td>Johnson</td>
      <td>Teacher</td>
      <td>Skydiving</td>
      <td>Yes</td>
    </tr>
     <tr id="row4">
      <td>Nina</td>
      <td>Pursuit</td>
      <td>Lawyer</td>
      <td>Tennis</td>
      <td>Yes</td>
    </tr>
    </tbody>
    </table>

jQuery:

$(document).ready(function () {
    $('#checkbox1').change(function () {
            for (var i = 0; i < 5; i++) {
                if ((this.checked) && $("#table #row"+i+" td:nth-child(3):not(:contains('Teacher'))").length){
                    $('#row'+i).fadeOut('slow');
                } 
                if (!this.checked) $('#row'+i).fadeIn('slow');
                }
    });

    $('#checkbox2').change(function () {
            for (var i = 0; i < 5; i++) {
                if ((this.checked) && $("#table #row"+i+" td:nth-child(4):not(:contains('Tennis'))").length){
                    $('#row'+i).fadeOut('slow');
                } 
                if (!this.checked) $('#row'+i).fadeIn('slow');
                }
    });

    $('#checkbox3').change(function () {
            for (var i = 0; i < 5; i++) {
                if ((this.checked) && $("#table #row"+i+" td:nth-child(5):not(:contains('Yes'))").length){
                    $('#row'+i).fadeOut('slow');
                } 
                if (!this.checked) $('#row'+i).fadeIn('slow');
                }
    });
});

JSFiddle DEMO

Answer 1

您不需要跟踪它。只显示所有行，并处理隐藏条件以隐藏匹配的行。

像这样：

When a checkbox is changed
Show all rows
Check all checkboxes, and hide those rows that match the criteria

由于这将在单帧上执行，因此浏览器不会闪烁，从而实现干净快速的更改。

Answer 2

您可以创建一个检查所有行和 shows/hide 行的函数，只需在复选框 change 事件上调用它，下面是一个示例：

function show_hide_rows() {
 var checkbox1=($('#checkbox1').is(':checked') ? true : false),
  checkbox2=($('#checkbox2').is(':checked') ? true : false),
  checkbox3=($('#checkbox3').is(':checked') ? true : false);
 
 var passed;
 for (var i = 0; i < 5; i++) {
  passed = false;
  if (checkbox1 && $("#table #row"+i+" td:nth-child(3):not(:contains('Teacher'))").length) passed = true;
  if (checkbox2 && $("#table #row"+i+" td:nth-child(4):not(:contains('Tennis'))").length) passed = true;
  if (checkbox3 && $("#table #row"+i+" td:nth-child(5):not(:contains('Yes'))").length) passed = true;
  
  if (passed) $('#row'+i).fadeOut('slow');
  else $('#row'+i).fadeIn('slow');
  }
}

$(function(){
  $('input[type="checkbox"]').on('change', function(){ show_hide_rows(); });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="checkbox1">Teacher</label>
<label><input type="checkbox" id="checkbox2">Tennis</label>
<label><input type="checkbox" id="checkbox3">Married</label>

    <table id="table" border="1">
    <thead>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Profession</th>
        <th>Hobby</th>
        <th>Married</th>
    </thead>
    <tbody>
    <tr id="row1">
      <td>John</td>
      <td>Doe</td>
      <td>Teacher</td>
      <td>Tennis</td>
      <td>Yes</td>
    </tr>
    <tr id="row2">
      <td>Eve</td>
      <td>Jackson</td>
      <td>Doctor</td>
      <td>Darts</td>
      <td>No</td>
    </tr>
    <tr id="row3">
      <td>Adam</td>
      <td>Johnson</td>
      <td>Teacher</td>
      <td>Skydiving</td>
      <td>Yes</td>
    </tr>
     <tr id="row4">
      <td>Nina</td>
      <td>Pursuit</td>
      <td>Lawyer</td>
      <td>Tennis</td>
      <td>Yes</td>
    </tr>
    </tbody>
    </table>

Answer 3

$(document).ready(function() {
  $('#checkbox1').change(function() {
    for (var i = 0; i < 5; i++) {
      if ((this.checked) && $("#table #row" + i + " td:nth-child(3):not(:contains('Teacher'))").length) {
        //    $('#row'+i).fadeOut('slow');
        $('#table #row' + i).addClass('check1');
      }
      if (!this.checked) $('#table #row' + i).removeClass('check1');
    }
  });

  $('#checkbox2').change(function() {
    for (var i = 0; i < 5; i++) {
      if ((this.checked) && $("#table #row" + i + " td:nth-child(4):not(:contains('Tennis'))").length) {
        //     $('#row'+i).fadeOut('slow');
        $('#table #row' + i).addClass('check2');
      }
      if (!this.checked) $('#table #row' + i).removeClass('check2');
    }
  });

  $('#checkbox3').change(function() {
    for (var i = 0; i < 5; i++) {
      if ((this.checked) && $("#table #row" + i + " td:nth-child(5):not(:contains('Yes'))").length) {
        //$('#row'+i).fadeOut('slow');
        $('#table #row' + i).addClass('check3');
      }
      if (!this.checked) $('#table #row' + i).removeClass('check3');
    }
  });
  $('.checkbox').change(function() {
    for (var i = 0; i < 5; i++) {
      if ($("#table #row" + i).hasClass('check1') || $("#table #row" + i).hasClass('check2') || $("#table #row" + i).hasClass('check3')) {
        $('#row' + i).fadeOut('slow');
        //  $('#table #row'+i).addClass('check3');
      } else {
        $('#row' + i).fadeIn('slow');
      }

    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="checkbox" class="checkbox" id="checkbox1">Teacher</label>
<label>
  <input type="checkbox" class="checkbox" id="checkbox2">Tennis</label>
<label>
  <input type="checkbox" class="checkbox" id="checkbox3">Married</label>

<table id="table" border="1">
  <thead>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Profession</th>
    <th>Hobby</th>
    <th>Married</th>
  </thead>
  <tbody>
    <tr id="row1">
      <td>John</td>
      <td>Doe</td>
      <td>Teacher</td>
      <td>Tennis</td>
      <td>Yes</td>
    </tr>
    <tr id="row2">
      <td>Eve</td>
      <td>Jackson</td>
      <td>Doctor</td>
      <td>Darts</td>
      <td>No</td>
    </tr>
    <tr id="row3">
      <td>Adam</td>
      <td>Johnson</td>
      <td>Teacher</td>
      <td>Skydiving</td>
      <td>Yes</td>
    </tr>
    <tr id="row4">
      <td>Nina</td>
      <td>Pursuit</td>
      <td>Lawyer</td>
      <td>Tennis</td>
      <td>Yes</td>
    </tr>
  </tbody>
</table>

你可以看看这个解决方案。

Answer 4

要实现您想要的行为，您需要在隐藏时存储每个元素的实际状态。这对所有复选框使用一个事件侦听器。

逻辑非常简单：遍历所有行并在满足以下条件时隐藏当前行：

复选框已选中
该行尚未隐藏
该行确实包含特定元素

每次隐藏都涉及对状态对象的更新，最后显示不在该状态对象中的所有行。

$(document).ready(function () {
  $('input[type="checkbox"]').click(function() {

    var checkbox_1 = $('#checkbox1')[0].checked
    var checkbox_2 = $('#checkbox2')[0].checked
    var checkbox_3 = $('#checkbox3')[0].checked
    var state = {}

    for (var i = 0; i < 5; i++) {
      if (checkbox_1 && !state[i] && $("#table #row"+i+" td:nth-child(3):not(:contains('Teacher'))").length){
        $('#row'+i).fadeOut('slow');
        state[i] = "hidden"
      }
      if (checkbox_2 && !state[i] && $("#table #row"+i+" td:nth-child(4):not(:contains('Tennis'))").length){
        $('#row'+i).fadeOut('slow');
        state[i] = "hidden"
      }
      if (checkbox_3 && !state[i] && $("#table #row"+i+" td:nth-child(5):not(:contains('Yes'))").length){
        $('#row'+i).fadeOut('slow');
        state[i] = "hidden"
      }
      if (!state[i]) {
        $('#row'+i).fadeIn('slow');
      }
    }
  });
});

隐藏带有多个复选框的行

Hide rows with multiple checkboxes

jquery

checkbox

filter

tablesorter