Sam Sam - 25 days ago 6
jQuery Question

jQuery - On click, check all checkboxes in class, if checked (do this) if not (then)

I have a PHP page that is populated by a MySQL query. I now want to filter the table results based on checkboxes that are selected.

When the page is loaded all results show. Then on change of a checkbox, the results will filter, hiding or showing rows based on what checkboxes are checked!

Can someone please help me with the jQuery code. I have;

$(function() {
$(".filterCheck").change(function() {
var checkArr = $('.filterCheck:checked').map(function() {
$ = '.filter_' + this.value;
$($).parents('tr').show();
return this.value;
}).get();
$.each(checkArr, function(i, val) {
alert('No values');
$v = ".filter_" + val;
$($v).parents('tr').show()
});
});


Can someone explain how I can edit this code, so if the checkbox is selected the results in the table are shown ( $(this.value).parents('tr').show() ) or, if the checkbox is NOT selected, then .hide(), BUT if ALL checkboxes are unchecked, then ALL results are shown..

The checkboxes are created by the PHP code,

$db_results = mysqli_query(Database::$conn, "SELECT * FROM suppliers WHERE ten_ID = $tenid ORDER BY sup_Name;");

/* make an array from all the suplier types
* build cheklist of the types */
echo "<br><h5 class='text-muted'>Filter by supplier type</h5>";
$db_types = [];
while ($row = mysqli_fetch_array($db_results)) { array_push($db_types, $row['sup_Type']); }
sort($db_types);
$db_types = array_unique($db_types);
foreach ($db_types as $i) {
echo "<div class='checkbox'>";
$t = strtolower(str_replace(' ', '_', $i));
echo "<label><input type='checkbox' class='filterCheck' value='$t'>$i</label>";
echo "</div>";
}


This will get the supplier type from the table, and create a checkbox from the returned value. The value of the checkbox is then set as the returned value, in lower case and replacing white space with '_'.
The table row, and table data fields are then populated with the below

$t = strtolower(str_replace(' ', '_', $row['sup_Type']));
echo "<td class='filter_$t'>" . $row['sup_Type'] . "</td>";


This sets the class of the TD with the value prefixed with 'filter_'
Then when you check a checkbox, it can take the value, prefix it with 'filter_' and show or hide all rows with that type.

Open to ANY suggestions to fix this.

Answer

Something like this

$(function() {
    $(".filterCheck").on('change', function() {
        var checked = $('.filterCheck:checked'),
            trs     = $('[class^="filter_"]').closest('tr');

        if (checked.length === 0) { // no boxes checked
            trs.show();
        } else {
            trs.hide();
            checked.each(function() {
                $('.filter_' + this.value).closest('tr').show();
            });
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5 class='text-muted'>Filter by supplier type</h5>
<div class='checkbox'>
    <label><input type='checkbox' class='filterCheck' value='test1'>Test 1</label>
    <label><input type='checkbox' class='filterCheck' value='test2'>Test 2</label>
    <label><input type='checkbox' class='filterCheck' value='test3'>Test 3</label>
</div>
<br /><br />
<table>
    <tr><td class='filter_test1'>test1</td></tr>
    <tr><td class='filter_test2'>test2</td></tr>
    <tr><td class='filter_test3'>test3</td></tr>
</table>