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

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>