Checkbox value to search table to show row if value matches row ID

Question

I am looking to use the checkboxes in the form to search through the below table and update the CSS class so that they are no longer hidden. Have tried a few attempts at a function with no luck.

Hoping for some help on how to construct the searchTable() function to loop through the table and match the value from the checkbox against the tr id value.

! Update !

I have been trying to use Jquery toggle() to show/hide the table rows with no luck but hoping I am now not too far away. Using vanilla HTML, CSS and JS as a "work project" on a business device.

 <script>$(document).ready(function(){ $('input[type="checkbox"]').click(function(){ var inputValue = $(this).attr("value"); $("#" + inputValue).toggle(); }); });</script> <label><input type="checkbox" name="systems" id="system1" value="B">B</label> <label><input type="checkbox" name="systems" id="system2" value="C">C</label> <label><input type="checkbox" name="systems" id="system3" value="BII">BII</label> <tbody id="myTable"> <tr class="hidden" id="B"> <td>B</td> <td>Tran</td> <td>skill-1, skill-2, skill-3</td> <td>skill-1, skill-2</td> <td>skill-1</td> <td> <select name="levels" id="levels"> <option value="level1">Level 1</option> <option value="level2">Level 2</option> <option value="level3">Level 3</option> </select> </td> </tr> <tr class="hidden" id="BII"> <td>BII</td> <td>Tran</td> <td>skill-1, skill-2, Skill-3</td> <td>skill-1, skill-2</td> <td>skill-1</td> <td> <select name="levels" id="levels"> <option value="level1">Level 1</option> <option value="level2">Level 2</option> <option value="level3">Level 3</option> </select> </td> </tr> <tr class="hidden" id="C"> <td>C</td> <td>Auth</td> <td>skill-1,skill-2,Skill-3</td> <td>skill-1,skill-2</td> <td>skill-1</td> <td> <select name="levels" id="levels"> <option value="level1">Level 1</option> <option value="level2">Level 2</option> <option value="level3">Level 3</option> </select> </td> </tr> </tbody>

Answer 1

I'm not aware of any searchTable() function, but you can actually accomplish this in pure CSS using the :checked pseudo-class and the general sibling selector ( ~ ) and then targeting the row.

Take a look:

 table, th, td { border: 1px solid black; border-collapse: collapse; } table th, table td { padding: 5px 10px; } table th input, table th select, table td input, table td select { margin: -5px -10px; padding: 5px 10px; border: none; font: inherit; } [name="systems"] ~ #myTable tr[id] { display: none; } [name="systems"]#system1:checked ~ #myTable tr#B, [name="systems"]#system2:checked ~ #myTable tr#C, [name="systems"]#system3:checked ~ #myTable tr#BII { display: table-row; }

 <input type="checkbox" name="systems" id="system1" value="B"> <label for="system1">BNS</label> <input type="checkbox" name="systems" id="system2" value="C"> <label for="system2">CMAS</label> <input type="checkbox" name="systems" id="system3" value="BII"> <label for="system3">Base II</label> <table id="myTable"> <tbody> <tr id="B"> <td>B</td> <td>Tran</td> <td>skill-1, skill-2, skill-3</td> <td>skill-1, skill-2</td> <td>skill-1</td> <td> <select name="levels" id="levels"> <option value="level1">Level 1</option> <option value="level2">Level 2</option> <option value="level3">Level 3</option> </select> </td> </tr> <tr id="BII"> <td>BII</td> <td>Tran</td> <td>skill-1, skill-2, Skill-3</td> <td>skill-1, skill-2</td> <td>skill-1</td> <td> <select name="levels" id="levels"> <option value="level1">Level 1</option> <option value="level2">Level 2</option> <option value="level3">Level 3</option> </select> </td> </tr> <tr id="C"> <td>C</td> <td>Auth</td> <td>skill-1,skill-2,Skill-3</td> <td>skill-1,skill-2</td> <td>skill-1</td> <td> <select name="levels" id="levels"> <option value="level1">Level 1</option> <option value="level2">Level 2</option> <option value="level3">Level 3</option> </select> </td> </tr> </tbody> <table>

I hope this helps. Let me know if you have any questions. Cheers!

Answer 2

Managed to get it working with below.

<label><input type="checkbox" name="systems" id="B1" value="B" onclick="showTable()">B</label>

```function showTable() {
  var x = document.getElementById("B");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}```