Displaying/Hiding table rows based on checkboxes

I have a table as follows: <table>  <tr><td><input type="text" name="attr_upgr1" /><input type='checkbox' name='attr_up1'/></td></tr>      <tr><td><input type="text" name="attr_upgr2" /><input type='checkbox' name='attr_up2'/></td></tr>   <tr><td><input type="text" name="attr_upgr3" /><input type='checkbox' name='attr_up3'/></td></tr>   <tr><td><input type="text" name="attr_upgr4" /><input type='checkbox' name='attr_up4'/></td></tr>   <tr><td><input type="text" name="attr_upgr5" /><input type='checkbox' name='attr_up5'/></td></tr>  </table> What I want to do is have a master switch (e.g. checkbox) that controls the displaying of the rows. In one setting it should display all rows, but in the other setting it should only display rows in which the associated checkbox is ticked. E.g. If up2 and up3 are ticked but the others are not then the display will show, depending upon the master switch, either all five rows or just those two. How doable is this?

Here's an example using CSS.  It hides all sections then determines which one is checked.  You can adopt for condition display.  div.sheet-overall-wrapper div[class^="sheet-section"] { display: none !important; } input.sheet-tab-page-core:checked ~ div.sheet-section-core, input.sheet-tab-page-skills:checked ~ div.sheet-section-skills, input.sheet-tab-page-gifts:checked ~ div.sheet-section-gifts, input.sheet-tab-page-attacks:checked ~ div.sheet-section-attacks, input.sheet-tab-page-soaks:checked ~ div.sheet-section-soaks, input.sheet-tab-page-gear:checked ~ div.sheet-section-gear { display: block !important; }

Thanks for the reply - sounds like just the thing. But I'm still learning this stuff and would really appreciate it being spelled out if you wouldn't mind! What is the corresponding html I would need to add to/around the table? How would I go about building the conditional element?