javascript - 选中复选框时显示/隐藏其余行

Question

我有一个 table它有一个 checkbox在每个 <td> 的第一列(在 row 元素中) .选中此项后，将显示该行中的其余列。

我已经阅读了几篇关于这个主题的文章和一些很好的例子，但不能完全达到我想要的效果。我已经能够隐藏其余的 <td>元素使用 css但没能做到visible .

我知道这可以通过 JavaScript 实现，但我并不精通它。非常感谢任何帮助。

table {
  width: 300px;
}

table td {
  min-width: 150px;
  border: 1px solid;
  text-align: center;
  padding: 5px;
}

table td lable {
  margin-right: 10px;
}

.L3,
.L4,
.L5 {
  visibility: hidden
}

<form method="post" action="#">
  <table>
    <tr>
      <th>Year</th>
      <th>Thank You Letter</th>
      <th>Pennant</th>
      <th>Trophy</th>
      <th>Medal</th>
      <th>Book Voucher</th>
    </tr>
    <tr>
      <td>
        <lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
      <td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="med3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
    </tr>
    <tr>
      <td>
        <lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
      <td><input type="checkbox" name="tu4" value="1" /></td>
      <td><input type="checkbox" name="pen4" value="1" /></td>
      <td><input type="checkbox" name="trp4" value="1" /></td>
      <td><input type="checkbox" name="med4" value="1" /></td>
      <td><input type="checkbox" name="bkv4" value="1" /></td>
    </tr>
    <tr>
      <td>
        <lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
      <td><input type="checkbox" name="tu5" value="1" /></td>
      <td><input type="checkbox" name="pen5" value="1" /></td>
      <td><input type="checkbox" name="trp5" value="1" /></td>
      <td><input type="checkbox" name="med5" value="1" /></td>
      <td><input type="checkbox" name="bkv5" value="1" /></td>
    </tr>

  </table>
</form>

Answer 1

使用 jQuery:

$(document).ready(function() {
  $("tr td:first-child :checkbox").change(function() {
    var checkboxes = $(this).parent().siblings("td").children(":checkbox");
    var containers = $(this).parent().siblings("td:not(first-child)");
    if (this.checked) {
      containers.css('visibility', 'visible');
      checkboxes.prop("checked", true);
    } else {
      containers.css('visibility', 'hidden');
      checkboxes.prop("checked", false);
    }
  });
});

table {
  width: 300px;
}

table td {
  min-width: 150px;
  border: 1px solid;
  text-align: center;
  padding: 5px;
}

table td lable {
  margin-right: 10px;
}

.L3,
.L4,
.L5 {
  visibility: hidden
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
  <table>
    <tr>
      <th>Year</th>
      <th>Thank You Letter</th>
      <th>Pennant</th>
      <th>Trophy</th>
      <th>Medal</th>
      <th>Book Voucher</th>
    </tr>
    <tr>
      <td>
        <lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
      <td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="med3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
    </tr>
    <tr>
      <td>
        <lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
      <td><input type="checkbox" name="tu4" value="1" /></td>
      <td><input type="checkbox" name="pen4" value="1" /></td>
      <td><input type="checkbox" name="trp4" value="1" /></td>
      <td><input type="checkbox" name="med4" value="1" /></td>
      <td><input type="checkbox" name="bkv4" value="1" /></td>
    </tr>
    <tr>
      <td>
        <lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
      <td><input type="checkbox" name="tu5" value="1" /></td>
      <td><input type="checkbox" name="pen5" value="1" /></td>
      <td><input type="checkbox" name="trp5" value="1" /></td>
      <td><input type="checkbox" name="med5" value="1" /></td>
      <td><input type="checkbox" name="bkv5" value="1" /></td>
    </tr>
  </table>
</form>

仅使用 JS:

var primaryCheckboxes = document.querySelectorAll("tr td:first-child input[type=checkbox]");

Array.from(primaryCheckboxes).forEach(checkbox => {
  checkbox.addEventListener("click", function(event) {
    var secondaryCheckboxes = this.parentElement.parentElement.querySelectorAll("input[type=checkbox]");
    var checkedSatus = false,
      visibilityStatus = "hidden";

    if (this.checked) {
      checkedSatus = true;
      visibilityStatus = "visible";
    }

    Array.from(secondaryCheckboxes).forEach(checkbox => {
      if (checkbox !== this) {
        checkbox.checked = checkedSatus;
        checkbox.parentElement.style.visibility = visibilityStatus;
      }
    });
  });
});

table {
  width: 300px;
}

table td {
  min-width: 150px;
  border: 1px solid;
  text-align: center;
  padding: 5px;
}

table td lable {
  margin-right: 10px;
}

.L3,
.L4,
.L5 {
  visibility: hidden
}

<form method="post" action="#">
  <table>
    <tr>
      <th>Year</th>
      <th>Thank You Letter</th>
      <th>Pennant</th>
      <th>Trophy</th>
      <th>Medal</th>
      <th>Book Voucher</th>
    </tr>
    <tr>
      <td>
        <lable>Level 3</lable>
        <input type="checkbox" name="level3" value="3" />
      </td>
      <td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="med3" value="1" /></td>
      <td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
    </tr>
    <tr>
      <td>
        <lable>Level 4</lable>
        <input type="checkbox" name="level4" value="4" />
      </td>
      <td><input type="checkbox" name="tu4" value="1" /></td>
      <td><input type="checkbox" name="pen4" value="1" /></td>
      <td><input type="checkbox" name="trp4" value="1" /></td>
      <td><input type="checkbox" name="med4" value="1" /></td>
      <td><input type="checkbox" name="bkv4" value="1" /></td>
    </tr>
    <tr>
      <td>
        <lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
      <td><input type="checkbox" name="tu5" value="1" /></td>
      <td><input type="checkbox" name="pen5" value="1" /></td>
      <td><input type="checkbox" name="trp5" value="1" /></td>
      <td><input type="checkbox" name="med5" value="1" /></td>
      <td><input type="checkbox" name="bkv5" value="1" /></td>
    </tr>
  </table>
</form>