通过复选框隐藏表数据

Question

我有一个问题：如果复选框被选中，我如何隐藏一些 table 数据？我在这个网站上尝试了一些类似的解决方案，但找不到合适的解决方案。

这是复选框的HTML：

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

这是我要隐藏的 table 数据的 HTML：

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

例如：如果选中复选框“bijeenkomstfunctie”（标准未选中），则需要隐藏 td id="3.10.1" 和 id="3.10.2"。

注意：我开始 HTML 和 CSS 几周了，所以欢迎所有意见 ;)

提前致谢！！

威尔扬

Answer 1

建议：不要使用相似的 ID。

这是众多解决方案之一。

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>

Answer 2

谢谢！但是如果我需要隐藏比这两个更多的 div，最有效的方法是什么？

例如：我不想在我的脚本中输入这个：

常量检查 = document.querySelector("#Bijeenkomstfunctie");

const qst1 = document.getElementById("3.10.1");
const qst2 = document.getElementById("3.10.2");
const qst56 = document.getElementById("3.10.56");



  if (check.checked == true) {
qst1.style.display = "none";
qst2.style.display = "none";
qst56.style.display = "none";
else {
qst1.style.display = "block";
qst2.style.display = "block";
qst56.style.display = "block";

你可能理解qst2和qst56之间是54qst的

再次感谢！

此致，威尔扬

通过复选框隐藏表数据

Hide tabledata by checkbox

html

css

hide

tablerow

datarow