我试图创建一个复选框过滤器,隐藏表中所有未检查的行。这是一个商务联系表,每个联系人都有一个优先级复选框,如果选中该复选框,并且您点击过滤器,它会隐藏所有非主要联系人。
到目前为止,我的代码是:
过滤按钮:
<ul id="filters">
<li>
<input type="checkbox" class="inputprio" id="filter-prio" />
<label for="filter-prio">Sofortkontakt</label>
</li>
<li>
<input type="checkbox" class="inputnorm" id="filter-norm" />
<label for="filter-norm">Normalkontakt</label>
</li>
桌子:
<?php while($dsk=$stmk->fetch(PDO::FETCH_ASSOC)) : ?>
<tr>
<form method="post" action="kontakte.php">
<td class="box">
<input name="prio" class="outprio" type="checkbox" <?= $dsk['Sofortkunde'] ? "checked": ""; ?>>
</td>
<td class="box" style="font-size:14px;">
<p class="label-input"><?= htmlspecialchars($dsk['Termin']); ?></p>
<input name="termin" class="edit-input" type="date" value="<?= htmlspecialchars($dsk['Termin']); ?>" style="display:none" required>
</td>
<td class="box" style="font-size:14px;">
<p class="label-input"><?= htmlspecialchars($dsk['Name']); ?></p>
<input name="name" class="edit-input" value="<?= htmlspecialchars($dsk['Name']); ?>" style="display:none; padding: 0;" required>
</td>
<td class="box" style="font-size:14px;">
<p class="label-input"><?= htmlspecialchars($dsk['Vorname']); ?></p>
<input name="vorname" class="edit-input" value="<?= htmlspecialchars($dsk['Vorname']); ?>" style="display:none; padding: 0;" required>
</td>
<td class="box" style="font-size:14px;">
<p class="label-input"><?= htmlspecialchars($dsk['Geburtsdatum']); ?></p>
<input name="geburtsdatum" class="edit-input" type="date" value="<?= htmlspecialchars($dsk['Geburtsdatum']); ?>" style="display:none; padding: 0;" required>
</td>
<td class="box" style="font-size:14px;">
<p class="label-input"><?= htmlspecialchars($dsk['Beruf']); ?></p>
<input name="beruf" class="edit-input" value="<?= htmlspecialchars($dsk['Beruf']); ?>" style="display:none; padding: 0;" required>
</td>
<td class="box" style="font-size:14px;">
<p class="label-input"><?= htmlspecialchars($dsk['Telefon']); ?></p>
<input name="telefon" class="edit-input" type="tel" value="<?= htmlspecialchars($dsk['Telefon']); ?>" style="display:none; padding: 0;" required>
</td>
<td class="box" style="font-size:14px;">
<p class="label-input"><?= htmlspecialchars($dsk['Info']); ?></p>
<input name="info" class="edit-input" value="<?= htmlspecialchars($dsk['Info']); ?>" style="display:none; padding: 0;" required>
</td>
<td class="box" style="font-size:14px;">
<p class="label-input"><?= htmlspecialchars($dsk['Anrufe']); ?></p>
<input name="anrufe" class="edit-input" type="number" value="<?= htmlspecialchars($dsk['Anrufe']); ?>" style="display:none; padding: 0;" required>
</td>
<td class="box" style="font-size:14px;">
<p class="label-input"><?= htmlspecialchars($dsk['Art']); ?></p>
<input name="art" class="edit-input" value="<?= htmlspecialchars($dsk['Art']); ?>" style="display:none; padding: 0;" required>
</td>
<td>
<button class="btn btn-danger" name="update" value="speichern" style="padding: 0;" type="submit">Speichern</button>
</td>
<input name="hidden" value="<?= htmlspecialchars($dsk['ID']); ?>" type="hidden">
</form>
jquery脚本:
<script>//show only prio
$(function(){
$(document).on('click', '.inputprio', function(){
if(!$(this).prop('checked')) {
$('.box').hide();
}
else {
$('.box').show();
}
});
});</script>
现在,当我选择prio过滤器时,每个框都会被隐藏,但我只想隐藏那些未选中的框。我尝试将第二个if放入$('。outprio:checkbox:not(:checked)'的函数中但是它没有用。有任何想法吗?
即使我对jquery不太满意,所以任何帮助都表示赞赏。谢谢!约翰内斯
我自己找到了答案,所以对于遇到同样问题的每个人都是我的解决方案:
$(function(){
$(document).on('change', '.inputprio', function(){
if($('.inputprio').prop('checked')) {
$('.outprio:not(:checked)').parent().parent().hide();
}
else {
$('.outprio').parent().parent().show();
}
});
});
你不需要解决它们,而是告诉所有未经检查的outprio输入,以隐藏第二个父母,这会让事情变得更容易。