Hide tabledata by checkbox

Question

I haven a question: How can i hide some tabledata if a checkbox is checked? I tried a few similar solutions on this web but couldn't find the right solution.

This is the HTML of the checkbox:

          <div class="checkboxfunctie">
          <input type="checkbox" id="Bijeenkomstfunctie"
                  unchecked>
          <label class="checktext" for="Bijeenkomstfunctie">Bijeenkomstfunctie</label>
      </div>

This is the HTML of the table data i want to hide:

    <tr>
      <td id="3.10.1">1. Het niet-bezwijken, bedoeld in artikel 3.9, wordt bepaald volgens NEN 
         8700. </td>
      <tr>
        <td id="3.10.2">2. Bij een niet in een woongebouw of logiesgebouw gelegen woonfunctie 
          of logiesfunctie kan bij het bepalen van het niet-bezwijken, bedoeld in artikel 3.9, 
          rekening worden gehouden met de stabiliteitsvoorziening van een op een aangrenzend 
          bouwwerkperceel gelegen gebruiksfunctie  van dezelfde soort. </td>
    </tr>
  

For example: if the checkbox "bijeenkomstfunctie" (standard unchecked) is checked, td id="3.10.1" and id="3.10.2" needs to be hidden.

Note: i started HTML and CSS sind a few weeks, so all input is welcome ;)

Thanks in advance!!

Wiljan

Answer 1

advice: don't use similar IDs.

this is one of many solutions.

const check = document.querySelector("#Bijeenkomstfunctie");

const qst1 = document.getElementById("3.10.1");

const qst2 = document.getElementById("3.10.2");

check.addEventListener("change", () => {
  if (check.checked == true) {
    qst1.style.display = "none";
    qst2.style.display = "none";
  } else {
    qst1.style.display = "block";
    qst2.style.display = "block";
  }
});

<div class="checkboxfunctie">
  <input type="checkbox" id="Bijeenkomstfunctie" unchecked>
  <label class="checktext" for="Bijeenkomstfunctie">Bijeenkomstfunctie</label>
</div>
<tr>
  <td>
    <div id="3.10.1"> 1. Het niet-bezwijken, bedoeld in artikel 3.9, wordt bepaald volgens NEN
      8700. </div>
  </td>
<tr>
  <td>
    <div id="3.10.2"> 2. Bij een niet in een woongebouw of logiesgebouw gelegen woonfunctie
      of logiesfunctie kan bij het bepalen van het niet-bezwijken, bedoeld in artikel 3.9,
      rekening worden gehouden met de stabiliteitsvoorziening van een op een aangrenzend
      bouwwerkperceel gelegen gebruiksfunctie van dezelfde soort. </div>
  </td>
</tr>