htmlcsshidetablerowdatarow

Hide tabledata by checkbox


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


Solution

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