Question

我有一个由MySQL查询填充的PHP页面。我现在想要根据选中的复选框过滤表结果。

加载页面后，所有结果都会显示。然后在更改复选框时，结果将根据选中的复选框过滤，隐藏或显示行！

有人可以帮我解决jQuery代码问题。我有;

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

有人可以解释我如何编辑此代码，因此如果选中该复选框，则会显示表格中的结果（$（this.value）.parents（＆＃39; tr＆＃39;）。show（））或者，如果未选中该复选框，则为.hide（），但如果未选中所有复选框，则显示所有结果..

复选框由PHP代码

创建

        $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>"; 
    }

这将从表中获取供应商类型，并从返回的值中创建一个复选框。然后将复选框的值设置为返回值（小写）并用＆＃39; _＆＃39;替换空格。然后使用下面的

填充表格行和表格数据字段

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

这将TD的类设置为前缀为＆＃39; filter _＆＃39; 然后，当您选中一个复选框时，它可以取值，并在其前面添加＆＃39; filter _＆＃39;并显示或隐藏具有该类型的所有行。

打开任何建议来解决此问题。

Answer 1

像这样的东西

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery - 点击后，检查课堂上的所有复选框，如果选中（如果没有）（那么）

1 个答案: