使用Jquery和多个复选框隐藏表行

我有一个带有用于过滤的复选框的HTML表，而我可以对单个复选框进行过滤，一旦我尝试将它们一起使用，结果就不会像预期的那样工作

[]Male []Popular []Active
============================================================
= FirstName  = LastName  = Sex    =  Popular  = Active     =
= John       = Doe       = Male   =  No       = Yes        =
= Eve        = Jackson   = Female =  Yes      = No         =
= Adam       = Johnson   = Child  =  Yes      = Yes        =
============================================================

上面是桌子的样子

表格的HTML代码

<input type="checkbox" id="male">Male<br>
<input type="checkbox" id="popular">Popular<br>
<input type="checkbox" id="active">Active<br>

<table>
<thead>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Sex</th>
    <th>Popular</th>
    <th>Active</th>
</thead>
<tbody>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>Male</td>
  <td>No</td>
  <td>Yes</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>Female</td>
  <td>Yes</td>
  <td>No</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson</td>
  <td>Child</td>
  <td>Yes</td>
  <td>Yes</td>
</tr>
</tbody>
</table> 

单个复选框工作正常，如果我同时使用多个复选框，事情就会出错，例如，如果我勾选“男性”，则只有男性会显示，如果我勾选“流行”，则所有人都会显示

这里是JSFIDLE URL

如果有人能给我指出正确的方向，我将不胜感激，经过大约3天的搜索，我的想法已经没有了

我的另一个想法是构建一个非常大的if语句，但我认为这不是正确的方法。

试试看

---

问题是您逻辑构造的谓词是析取（或的组合）。因此，当您选中“男性”和“活动”时，脚本将显示包含男性或活动用户的所有行，在您的示例中都是男性或活动用户

@Rajaprabhu Aravindasamy的答案很好，但需要多次通过表中的行。如果您愿意，您可以采取更实用的方法，构造一个谓词，允许您对它们进行单次传递：

//a check box has been checked
$(':checkbox').change(function() {
    //are there no check boxes selected?
    if ($('input:checkbox:checked').length > 0) {
        //hide all rows
        $('tbody tr').each(function() {
            $(this).hide();
        });
        //show only rows needed to be show
        if ($('#male').is(':checked')) {
            ShowRow('Male','2');
        }
        if ($('#popular').is(':checked')) {
            ShowRow('Yes','3');
        }
        if ($('#active').is(':checked')) {
            ShowRow('Yes','4');
        }
    } else {
        //there are no check boxes selected, show all rows
        $('tr').each(function() {
            $(this).show();
        });
    }
});

function ShowRow(text, column) {
    $('tr').each(function() {
        if ($(this).children('td:eq(' + column + ')').text().indexOf(text) != '-1') {
            $(this).show();
        }
    });
}

$(':checkbox').change(function () {
    $('tr').show();
    if ($('input:checkbox:checked').length > 0) {
        if ($('#male').is(':checked')) {
            ShowRow('Male', '2');
        }
        if ($('#popular').is(':checked')) {
            ShowRow('Yes', '3');
        }
        if ($('#active').is(':checked')) {
            ShowRow('Yes', '4');
        }
    }
});

function ShowRow(text, column) {
    $('tr:visible:not(:first)').each(function () {
        if ($(this).children('td:eq(' + column + ')').text().indexOf(text) != '-1') {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}

function tautology() {
    return true;
}

function makePredicate(text, column) {
    return function(row) {
        return -1 !== $(row).children('td:eq(' + column + ')').text().indexOf(text);
    };
}

var isMale = makePredicate('Male', 2);
var isPopular = makePredicate('Yes', 3);
var isActive = makePredicate('Yes', 4);

function conjoin(f, g) {
    return function (row) {
        return f(row) && g(row);
    };
};

//a check box has been checked
$(':checkbox').change(function() {
    var isVisible = tautology;

    //are there no check boxes selected?
    if ($('input:checkbox:checked').length > 0) {
        //show only rows needed to be show
        if ($('#male').is(':checked')) {
            isVisible = conjoin(isVisible, isMale);
        }
        if ($('#popular').is(':checked')) {
            isVisible = conjoin(isVisible, isPopular);
        }
        if ($('#active').is(':checked')) {
            isVisible = conjoin(isVisible, isActive);
        }
        $('tbody > tr').each(function() {
            $(this).toggle(isVisible(this));
        });
    } else {
        //there are no check boxes selected, show all rows
        $('tr').show();
    }
});