使用复选框隐藏/显示具有特定类的表行

Question

我有一些代码在表中显示查询结果。我希望能够单击以显示或隐藏某些。我知道我可以用切换和 CSS 做到这一点，但一直卡住。我的代码是这样的

这样的查询结果构建了我回显的表的行。

$fields .= "<tr class='viewed' id='".$job_id."' style=".$new_table."><td scope='row' data-label='Date' style='".$new_table."'>".$new_date."</td><td data-label='Pickup'>".$p_city."</td><td data-label='Destination'>".$d_city."</td><td data-label='Pax'>".$pax."</td><td data-label='Vehicle'>".$vehicle_required."</td><td data-label='Status'>".$bidded." (<B>".$bid_count."</B>) </td></td><td width='50px'><button type='button' data-name='".$job_id."' class='btn btn-success'><span class='glyphicon glyphicon-zoom-in'></span> View job </button></td></tr>";

$fields .= "<tr class='unviewed' id='".$job_id."' style=".$new_table."><td scope='row' data-label='Date' style='".$new_table."'>".$new_date."</td><td data-label='Pickup'>".$p_city."</td><td data-label='Destination'>".$d_city."</td><td data-label='Pax'>".$pax."</td><td data-label='Vehicle'>".$vehicle_required."</td><td data-label='Status'>".$bidded." (<B>".$bid_count."</B>) </td></td><td width='50px'><button type='button' data-name='".$job_id."' class='btn btn-success'><span class='glyphicon glyphicon-zoom-in'></span> View job </button></td></tr>";

$fields .= "<tr class='outofrange' id='".$job_id."' style=".$new_table."><td scope='row' data-label='Date' style='".$new_table."'>".$new_date."</td><td data-label='Pickup'>".$p_city."</td><td data-label='Destination'>".$d_city."</td><td data-label='Pax'>".$pax."</td><td data-label='Vehicle'>".$vehicle_required."</td><td data-label='Status'>".$bidded." (<B>".$bid_count."</B>) </td></td><td width='50px'><button type='button' data-name='".$job_id."' class='btn btn-success'><span class='glyphicon glyphicon-zoom-in'></span> View job </button></td></tr>";

我的复选框代码是：

<div class="container">
  <h2>Form control: inline checkbox</h2>
  <p>The form below contains three inline checkboxes:</p>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show viewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show unviewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show outofrange
    </label>
  </form>
</div>

点击时我需要切换显示的 CSS 是

.viewed {
    display: none;
}

.outofrange {
    display: none;
}

.unviewed {
    display: none;
}

如何在单击时切换以更改为显示/隐藏？

非常感谢

Answer 1

您可以像这样添加它来简化您的点击事件。

$(document).ready(function() {

  // Add logic to toggle visiblity when unviewed check clicked
  $('form input').click(function() {
    if($(this).is(':checked')) {
      $('tr.'+ $(this).attr('id')).show();
    }
    else {
      $('tr.'+ $(this).attr('id')).hide();
    }
  });
  });

.viewed {
    display: none;
}

.outofrange {
    display: none;
}

.unviewed {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <h2>Form control: inline checkbox</h2>
  <p>The form below contains three inline checkboxes:</p>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="" id="viewed">Show viewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="" id="unviewed">Show unviewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="" id="outofrange">Show outofrange
    </label>
  </form>
  <div>
  
  <table>
  
  <tr class="viewed">
    <td>viewed</td>
  </tr>
  <tr class="unviewed">
    <td>unviewed</td>
  </tr>
  <tr class="outofrange">
    <td>outofrange</td>
  </tr>
  </table>
  </div>
</div>

Answer 2

尝试将以下 javascript 添加到您的页面以实现此目的。我们的想法是为每个复选框（输入）添加点击处理程序，为您的三种单元格类型viewed、outofrange 和unviewed 中的每一种运行特定的显示/隐藏逻辑：

$(document).ready(function() {

  // Add logic to toggle visiblity when viewed check clicked
  $('form input').eq(0).click(function() {
  
    if($(this).is(':checked')) {
      $('tr.viewed').show();
    }
    else {
      $('tr.viewed').hide();
    }
  })

  // Add logic to toggle visiblity when unviewed check clicked
  $('form input').eq(1).click(function() {
    if($(this).is(':checked')) {
      $('tr.unviewed').show();
    }
    else {
      $('tr.unviewed').hide();
    }
  })

  // Add logic to toggle visiblity when outofrange check clicked
  $('form input').eq(2).click(function() {
    if($(this).is(':checked')) {
      $('tr.outofrange').show();
    }
    else {
      $('tr.outofrange').hide();
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <h2>Form control: inline checkbox</h2>
  <p>The form below contains three inline checkboxes:</p>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show viewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show unviewed
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Show outofrange
    </label>
  </form>
</div>

也是working jsfiddle here

Answer 3

您可以将您希望定位的行的类添加到每个复选框的数据属性中，如下所示：

<label class="checkbox-inline">
  <input type="checkbox" data-target-class="viewed" value="">Show viewed
</label>
<label class="checkbox-inline">
  <input type="checkbox" data-target-class="unviewed" value="">Show unviewed
</label>
<label class="checkbox-inline">
  <input type="checkbox" data-target-class="outofrange" value="">Show outofrange
</label>

然后像这样在你的 jQuery 中使用它：

$('form input[type="checkbox"]').on('click', function() {
    var targetClass = $(this).data('target-class');
    var $rows = $('tr.' + targetClass);
    if($(this).is(':checked')) {
        $rows.show();
    } else {
        $rows.hide();
    }
});