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

我有一个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>

最佳答案

使用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>

关于javascript - 选中复选框时显示/隐藏其余行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47006580/