選中復選框時顯示/隱藏其余行

Question

我有一個table ，它在每一row的第一列（在<td>元素中）有一個checkbox 。 選中此項后，將顯示該行中的其余列。

我已經閱讀了幾篇關於這個主題的文章，其中有一些很好的例子，但無法完全實現我想要的。 我已經能夠使用css隱藏其余的<td>元素，但無法使其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>