Hide table rows with jQuery and multiple checkboxes

Question

I have an HTML table with checkboxes for filtering, while I can set up filtering for individual checkboxes, and as soon as I try to use them together, the results will not work properly.

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

Above, what the table looks like

HTML code for table

<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> 

Javascript

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

As a rule, the flags work correctly, everything goes against it, if I use several boxes at the same time, for example, if I specify Male, then only men will be displayed, if I then check Popularity, then everything will appear.

Here is the JSFiddle URL; http://jsfiddle.net/3XhCa/5/

I would appreciate it if someone could point me in the right direction, after about three days of searching, my ideas are running out.

, if, , .

Answer 1

this,

$(':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();
        }
    });
}

Answer 2

, , , ( "" ). , "" "", script , , .

@Rajaprabhu Aravindasamy , . , , :

http://jsfiddle.net/3XhCa/10/

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