Show/hide rest of the rows when checkbox is checked

Question

I have a table which has a checkbox in the first column (in a element) of every row. When this is checked, the rest of the columns in that row will be displayed.

I have read several articles on this topic with some great examples but can't achieve exactly what I want. I had been able to hide the rest of the elements using css but not been able to make it visible.

I understand this is possible with JavaScript but I am not well versed in it. Any help is highly appreciated.

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
}


  
    
      Year
      Thank You Letter
      Pennant
      Trophy
      Medal
      Book Voucher
    
    
      
        Level 3
      
      
      
      
      
    
    
      
        Level 4
      
      
      
      
      
    
    
      
        Level 5

user4447799 · Accepted Answer

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



  
    
      Year
      Thank You Letter
      Pennant
      Trophy
      Medal
      Book Voucher
    
    
      
        Level 3
      
      
      
      
      
    
    
      
        Level 4
      
      
      
      
      
    
    
      
        Level 5

Using only 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
}


  
    
      Year
      Thank You Letter
      Pennant
      Trophy
      Medal
      Book Voucher
    
    
      
        Level 3
        
      
      
      
      
      
      
    
    
      
        Level 4
        
      
      
      
      
      
      
    
    
      
        Level 5

Show/hide rest of the rows when checkbox is checked

Answers (1)

Related Questions