Jquery 按多个复选框筛选表行

Jquery Filter table rows by multiple checkboxes

本文关键字:筛选 复选框 Jquery      更新时间:2023-09-26

我正在尝试让过滤器适用于表。 我想要的是复选框,根据是否选中行以及值是否存在于表单元格中来过滤(隐藏)行。 我让它有点工作,但它只会对其中一个复选框进行排序。 此外,如果正在筛选的表单元格中有多个值,则该行将被隐藏。 思潮? 提前感谢您的任何帮助。 出于某种原因,我真的很挣扎!

这是我一直在使用的代码:

$("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>

我认为您只是在调用第一个复选框 [0]

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

通过插入类似的东西来调用所有内容

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

你的代码工作正常,这是一个简化版本

$("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>