bbs-go-site

我试图做到这一点，以便在选中复选框时仅显示某些表行。

我一直在寻找如何制作的几个小时，所以如果我勾选“ Mannen”，它将只显示桌子上的人，其余的隐藏。在“艾伦”的情况下，我希望它在选中时显示给所有人。

问题1：我如何内联阻止复选框和文本，而不是将它们彼此包围？我已经尝试通过CSS来实现它，但是没有使其正常工作。（对于JSfiddle来说，它似乎可以正常工作并且是内联的，但是在我的本地服务器上却不是这样）

问题2：我一直在尝试使其与此JS代码一起使用，但是我是一个初学者，因此不确定在尝试此方法时这是否正确，并且当我选中一个框时它什么也没做。

JS代码

$('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();
    }
});

HTML代码

<!doctype html>
<html lang="nl">

<head>
    <script src="Geslachten.js" defer></script>
    <title>Geslachten</title>
    <link rel="icon" href="javascript.ico" type="image/x-icon">
    <link rel="stylesheet" href="default.css">
</head>

<body>
  <div class="Checkboxes">
    <label class="checkbox-inline">
      <input type="checkbox" data-target-class="mannen" value=""> Mannen
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" data-target-class="Vrouwen" value=""> Vrouwen
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" data-target-class="Allen" value=""> Allen
    </label>
  </div>

    <table >
        <tr>
          <th>Voornaam</th>
          <th>Familienaam</th>
          <th>Geslacht</th>
          <th>Foto</th>
        </tr>
        <tr class="Mannen Allen">
          <td>Noah</td>
          <td>Smith</td>
          <td><img src="man.png" alt=""</img></td>
          <td><img src="man1.jpg" alt=""</img></td>
        </tr>
        <tr class="Vrouwen Allen">
          <td>Emma</td>
          <td>Johnson</td>
          <td><img src="vrouw.png" alt=""</img></td>
          <td><img src="vrouw1.jpg" alt=""</img></td>
        </tr>
        <tr class="Vrouwen Allen">
            <td>Sophia</td>
            <td>Wilson</td>
            <td><img src="vrouw.png" alt=""</img></td>
            <td><img src="vrouw2.jpg" alt=""</img></td>
          </tr>
          <tr class="Mannen Allen">
            <td>Mason</td>
            <td>Jones</td>
            <td><img src="man.png" alt=""</img></td>
            <td><img src="man2.jpg" alt=""</img></td>
          </tr>
          <tr class="Mannen Allen">
            <td>William</td>
            <td>Davis</td>
            <td><img src="man.png" alt=""</img></td>
            <td><img src="man3.jpg" alt=""</img></td>
          </tr>
          <tr class="Mannen Allen">
            <td>Liam</td>
            <td>Williams</td>
            <td><img src="man.png" alt=""</img></td>
            <td><img src="man4.jpg" alt=""</img></td>
          </tr>
          <tr class="Vrouwen Allen">
            <td>Olivia</td>
            <td>Miller</td>
            <td><img src="vrouw.png" alt=""</img></td>
            <td><img src="vrouw3.jpg" alt=""</img></td>
          </tr>
          <tr class="Mannen Allen">
            <td>Jacob</td>
            <td>Brown</td>
            <td><img src="man.png" alt=""</img></td>
            <td><img src="man5.jpg" alt=""</img></td>
          </tr>
          <tr class="Vrouwen Allen">
            <td>Ava</td>
            <td>Moore</td>
            <td><img src="vrouw.png" alt=""</img></td>
            <td><img src="vrouw4.jpg" alt=""</img></td>
          </tr>
          <tr class="Vrouwen Allen">
            <td>Isabella</td>
            <td>Taylor</td>
            <td><img src="vrouw.png" alt=""</img></td>
            <td><img src="vrouw5.jpg" alt=""</img></td>
          </tr>
      </table>


</body>

</html>

Jsfiddle link --> https://jsfiddle.net/uvhwy32q/

使用超链接仅显示某些表行