我有一个由 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('tr').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>";
}
这将从表中获取供应商类型,并根据返回值创建一个复选框。然后将复选框的值设置为返回值,小写并用“_”替换空格。 然后用以下内容填充表行和表数据字段
$t = strtolower(str_replace(' ', '_', $row['sup_Type']));
echo "<td class='filter_$t'>" . $row['sup_Type'] . "</td>";
这将设置 TD 的类,其值以“filter_”为前缀 然后,当您选中复选框时,它可以获取该值,在其前面添加“filter_”前缀,然后显示或隐藏具有该类型的所有行。
接受任何解决此问题的建议。
最佳答案
类似这样的事情
$(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>
关于php - jQuery - 单击时,选中类中的所有复选框,如果选中(执行此操作),如果没有选中(则),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40573765/