Filter table with checkboxes
Modify your jQuery where it loops through each row. Create a tag variable to store whether or not the row is to be shown, and set it to true by default.
Now when you loop through each row, you will also loop through each class you are checking for. If at any point, a loop test fails, set your show variable to false to keep the row hidden.
$("input[name='filterStatus']").change(function () {
var classes = [];
$("input[name='filterStatus']").each(function () {
if ($(this).is(":checked")) { classes.push('.' + $(this).val()); }
});
if (classes == "") { // if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else { // otherwise, hide everything...
$("#StatusTable tbody tr").hide();
$("#StatusTable tr").each(function () {
var show = true;
var row = $(this);
classes.forEach(function (className) {
if (row.find('td' + className).html() == ' ') { show = false; }
});
if (show) { row.show(); }
});
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="ISO " />
<label for="filter_1">ISO</label>
<input type="checkbox" name="filterStatus" value="AMCA" />
<label for="filter_2">AMCA</label>
<input type="checkbox" name="filterStatus" value="UL" />
<label for="filter_3">UL</label>
</form>
<table border="1" id="StatusTable">
<thead>
<tr>
<th>Name</th>
<th>ISO</th>
<th>AMCA</th>
<th>UL</th>
</tr>
<tbody>
<tr class="ISO">
<td class="Name">Name1</td>
<td class="ISO">✓</td>
<td class="AMCA"> </td>
<td class="UL"> </td>
</tr>
<tr class="ISO AMCA">
<td class="Name">Name2</td>
<td class="ISO">✓</td>
<td class="AMCA">✓</td>
<td class="UL"> </td>
</tr>
<tr class="ISO AMCA UL">
<td class="Name">Name3</td>
<td class="ISO">✓</td>
<td class="AMCA">✓</td>
<td class="UL">✓</td>
</tr>
</tbody>
</table>
<script></script>
</body>
</html>Demo: https://jsfiddle.net/erkaner/u12te5jb/
Here is my solution
$("input[name='filterStatus']").change(function () {
var count1 = $("input[name='filterStatus']:checked").length;//number of checked items
$("#StatusTable>tbody> tr").each(function () {//for each row
var count2 = 0;//this is the count of td that has ✓
var row = $(this);//the current row
$("input[name='filterStatus']:checked").each(function () {//for each checked item
var inputVal = $(this).val();//get the value, which is class of the corresponding td, see below
if (row.find('.' + inputVal).html().indexOf("✓") >= 0)//if the td that corresponds to the selected checkbox contains ✓
count2++;//then increase
});
if (count1 == count2) //if counts match
row.show();//then show
else
row.hide();
});
});
Here with the help of this below code. You can filter the table based on checkbox checked and when you didn't select any checkbox then it will display all the records.
$(document).ready(function(){
$(".name").on("click", function() {
name_list = []
$("#myTable tr").hide()
var flag = 1
$("input:checkbox[name=name]:checked").each(function(){
flag = 0;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
if($(this).text().toLowerCase().indexOf(value) > -1)
$(this).show()
});
});
if(flag == 1)
$("#myTable tr").show()
});
});table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>
<style>
</style>
</head>
<body>
<h2>Filterable Table</h2>
<input type="checkbox" class="name" name="name" value="John" />John
<input type="checkbox" class="name" name="name" value="July" />July
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</body>
</html>