Jquery通過多個複選框過濾表格行

Question

我正在嘗試獲取表格的過濾器。我想要的是複選框根據它們是否被選中來篩選（隱藏）行，以及該值是否存在於表格單元格中。我有點工作，但它只會對其中一個複選框進行排序。另外，如果表格單元格中有多個值被過濾，則該行將被隱藏。思考？預先感謝您的任何幫助。出於某種原因，我真的很困難！

這是我一直在使用的代碼：

$("input:checkbox").click(function() { 
var showAll = true; 
$('tr').not('.first').hide(); 
$('input[type=checkbox]').each(function() { 
    if ($(this)[0].checked) { 
     showAll = false; 
     var status = $(this).attr('rel'); 
     var value = $(this).val();    
     $('td.' + 'status' + '[rel="' + value + '"]').parent('tr').show(); 

    } 
}); 
    if(showAll){ 
    $('tr').show(); 
} 
}); 

的標記如下（請原諒一些混亂，其WordPress的）

<div class="grants-filter"> 
<h3 class="filter-title">Filter Scholarships</h3><br/> 
<h3>Year of Study:</h3> 
<input type="checkbox" name="chx" rel="status" value="Freshman">Freshman 
<input type="checkbox" name="chx" rel="status" value="Sophmore">Sophmore 
<input type="checkbox" name="chx" rel="status" value="Junior">Junior 
<input type="checkbox" name="chx" rel="status" value="Senior">Senior 
<br/><br/><h3>Duration:</h3> 
<input type="checkbox" rel="duration" value="Summer">Summer 
<input type="checkbox" rel="duration" value="Semester">Semester 
<input type="checkbox" rel="duration" value="Full Year or More">Full Year or More 


</div> 

<div class="grants-listing"> 


<table border="1" id="table" class="grants-table"> 
<thead> 
<tr class="first"> 
<th>Title</th> 
<th>Description</th> 
<th>Field</th> 
<th>Duration</th> 
<th>Year of Study</th> 
<th>Other</th> 
<th>Procedure</th> 
<th>URL</th> 
</tr> 
</thead> 
<tbody> 
<?php 
$grargs = array ('post_type' => 'scholarship'); 
$grant_query = new WP_Query($grargs); 
while ($grant_query -> have_posts()): 
$grant_query -> the_post(); ?> 
<tr class="grant-detail"> 

<td> 
<?php the_title(); ?> 
</td> 
<td><?php echo wp_trim_words(get_the_content(), 25); ?></td> 
<td class="fields" rel="<?php echo get_field('fields'); ?>"><?php echo the_field('fields'); ?></td> 
<td class="duration" rel="<?php echo the_field('desired_duration'); ?>"><?php echo the_field('desired_duration'); ?></td> 
<td class="status" rel="<?php echo the_field('year-of-study'); ?>"><?php echo the_field('year-of-study'); ?></td> 
<td class="other" rel="<?php echo the_field('other'); ?>"><?php echo the_field('other'); ?></td> 
<td class="procedure" rel="<?php echo the_field('procedure'); ?>"><?php echo the_field('procedure'); ?></td> 
<td class="url"><a href="<?php echo get_field('url'); ?>"><?php echo get_field('url'); ?></a></td> 
</tr> 
<?php endwhile; 
wp_reset_postdata(); //reset the first query 
?> 

</tbody> 
</table> 

Answer 1

正如我認爲你只是在呼喚第一複選框[0]

if ($(this)[0].checked) { 

呼叫所有由相同的

插入成才

$('input[type=checkbox]').each(function() { 
      if (this.checked) { 
       console.log($(this).val()); 
      } 
}); 

Answer 2

你的代碼工作正常，這裏是一個簡化版本

$("input:checkbox").click(function() { 
 
    var showAll = true; 
 
    $('tr').not('.first').hide(); 
 
    $('input:checkbox:checked').each(function() { 
 
    showAll = false; 
 
    var status = $(this).attr('rel'); 
 
    var value = $(this).val(); 
 
    $('td.' + 'status' + '[rel="' + value + '"]').parent('tr').show(); 
 
    }); 
 
    if (showAll) { 
 
    $('tr').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="grants-filter"> 
 
    <h3 class="filter-title">Filter Scholarships</h3> 
 
    <br/> 
 
    <h3>Year of Study:</h3> 
 
    <input type="checkbox" name="chx" rel="status" value="Freshman">Freshman 
 
    <input type="checkbox" name="chx" rel="status" value="Sophmore">Sophmore 
 
    <input type="checkbox" name="chx" rel="status" value="Junior">Junior 
 
    <input type="checkbox" name="chx" rel="status" value="Senior">Senior 
 
</div> 
 

 
<div class="grants-listing"> 
 

 

 
    <table border="1" id="table" class="grants-table"> 
 
    <thead> 
 
     <tr class="first"> 
 
     <th>Title</th> 
 
     <th>Description</th> 
 
     <th>Fields</th> 
 
     <th>Status</th> 
 
     <th>Procedure</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="grant-detail"> 
 
     <td> 
 
      Name 
 
     </td> 
 
     <td>Description</td> 
 
     <td class="fields" rel="Freshman">Freshman</td> 
 
     <td class="status" rel="Freshman">Freshman</td> 
 
     <td class="procedure" rel="Freshman">Freshman</td> 
 
     </tr> 
 
     <tr class="grant-detail"> 
 
     <td> 
 
      Name 
 
     </td> 
 
     <td>Description</td> 
 
     <td class="fields" rel="Sophmore">Sopho</td> 
 
     <td class="status" rel="Sophmore">Sopho</td> 
 
     <td class="procedure" rel="Sophmore">Sopho</td> 
 
     </tr> 
 
     <tr class="grant-detail"> 
 
     <td> 
 
      Name 
 
     </td> 
 
     <td>Description</td> 
 
     <td class="fields" rel="Junior">Junior</td> 
 
     <td class="status" rel="Junior">Junior</td> 
 
     <td class="procedure" rel="Junior">Junior</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>