Флажок фильтра для таблицы pdo

Question

я пытаюсь создать фильтр-флажок, который скрывает все непроверенные строки в таблице. это таблица контактов бизнеса, и у каждого контакта есть флажок приоритета, если этот флажок установлен и вы нажали на фильтр, он скрывает все контакты, не являющиеся prio.

Вот мой код:

Кнопка фильтра:

<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, все поля скрываются, но я хочу скрыть только те, которые не отмечены. я попытался положить второй, если в функцию за $ ('. outprio: checkbox: not (: флажок)'), но это не сработало. есть идеи?

Мне не очень комфортно с jquery, поэтому любая помощь приветствуется. Спасибо! Johannes

Answer 1

Я нашел ответ сам, поэтому для всех, у кого такая же проблема, вот мое решение:

$(function(){
$(document).on('change', '.inputprio', function(){


  if($('.inputprio').prop('checked')) {  

    $('.outprio:not(:checked)').parent().parent().hide();  

  }
  else {
    $('.outprio').parent().parent().show(); 
  }

});
});

вам не нужно указывать адрес, вместо этого вы говорите всем непроверенным входам outprio, чтобы скрыть своего второго родителя, что облегчает задачу.