I am filtering a table with checkboxes. The code I have works fine, in some aspects.
I want it to filter results if they meet all the checks, not one.
My Example
$("input[name='filterStatus'], select.filter").change(function() {
var classes = [];
var stateClass = ""
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.' + $(this).val());
}
});
if (classes == "" && stateClass == "") {
// if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise, hide everything...
$("#StatusTable tbody tr").hide();
// then show only the matching items
rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*');
if (rows.size() > 0) {
rows.show();
}
}
});
<html>
<head>
<script src="http://ift.tt/1g1yFpr"></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>
Thanks for your concern
Aucun commentaire:
Enregistrer un commentaire