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

Question

我的table checkbox在<td>的第一列（row元素）中有<td>。选中此选项后，将显示该行中的其余列。

我已经阅读了几篇关于这个主题的文章，其中有一些很好的例子，但是无法达到我想要的目的。我能够使用css隐藏剩余的visible元素但无法将其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 }隐藏起来。

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

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

    var tw_template_trigger = '{{';
    var tw_template_tag = '<span class="tw-template-tag" contenteditable="false">Pick a tag</span>';

    $(".tw-post-template-content").keypress(function(e){ return e.which != 13; });

    $('.tw-post-template-content').on( 'keyup mouseup', function() {
        triggerTag( this ); 
    });

    function triggerTag(containerEl) {

        var sel,
            range,
            text;

        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0).cloneRange(); // clone current range into another variable for manipulation#
                range.collapse(true);
                range.setStart(containerEl, 0);
                text = range.toString();
            }
        }

        if( text && text.slice(-2) == tw_template_trigger ) {
            range.setStart( range.endContainer, range.endOffset - tw_template_trigger.length);
            range.setEnd( range.endContainer, range.endOffset );
            range.deleteContents();
            range.insertNode(document.createTextNode(' '));

            //

            var el = document.createElement("div");
            el.innerHTML = tw_template_tag;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            var firstNode = frag.firstChild;
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }

            return true;
        }

        return false;

    }

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>