当我选中复选框时，有没有办法让每张卡片都显示删除图标？

Question

当我选中复选框元素时，我无法使垃圾桶图标可见多个。

第一张卡片只显示垃圾桶图标，其余卡片均未显示。

我尝试了 getElementById、querySelectorAll 和 getElementsByClassName。一切都没有按预期正常工作。

你能找出代码中的逻辑错误吗？

function check() {

  if (document.querySelector(".check").checked == true) {
    document.querySelector(".deleteButton").style.visibility = "visible";
  } else {
    document.querySelector(".deleteButton").style.visibility = "hidden";
  }
}

.deleteButton {
  visibility: hidden;
}

<div class="col-sm-12">
  <div class="card">
    <div class="card-body">
      <div class="form-check">
        <a onclick="check()">
          <input type="checkbox" class="check">
        </a>
      </div>
      <h4 class="card-title">
        Description 1
          <a class="btn btn-outline-info deleteButton" href="/delete-todo/?id1">
            <i class="fas fa-trash-alt" disabled="disabled"></i>
          </a>
      </h4>
    </div>

  </div>
  <br>
</div>
<div class="col-sm-12">
  <div class="card">
    <div class="card-body">
      <div class="form-check">
        <a onclick="check()">
          <input type="checkbox" class="check">
        </a>
      </div>
      <h4 class="card-title">
                Description 2
          <a class="btn btn-outline-info deleteButton" href="/delete-todo/?id2">
            <i class="fas fa-trash-alt" disabled="disabled"></i>
          </a>
      </h4>
    </div>

  </div>
  <br>
</div>
<div class="col-sm-12">
  <div class="card">
    <div class="card-body">
      <div class="form-check">
        <a onclick="check()">
          <input type="checkbox" class="check">
        </a>
      </div>
      <h4 class="card-title">
                Description 3
          <a class="btn btn-outline-info deleteButton" href="/delete-todo/?id3">
            <i class="fas fa-trash-alt" disabled="disabled"></i>
          </a>
      </h4>
    </div>

  </div>
  <br>
</div>

Answer 1

不要将复选框包裹在 link

中

也委托

我从一个叫容器的 div 委托。它必须是最近的卡片通用容器

document.getElementById("container").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("check")) {
    tgt.closest(".card-body").querySelector(".deleteButton").classList.toggle("hide", !tgt.checked)
  }
  else if (tgt.closest("a").classList.contains("deleteButton")) {
    e.preventDefault();
    tgt.closest(".card").remove()
  }
})

.hide {
  display: none
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div id="container">
  <div class="col-sm-12">
    <div class="card">
      <div class="card-body">
        <div class="form-check">
          <input type="checkbox" class="check">
        </div>
        <h4 class="card-title">
          Description 1
          <a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id1">
            <i class="fas fa-trash-alt" disabled="disabled">Delete</i>
          </a>
        </h4>
      </div>

    </div>
    <br>
  </div>
  <div class="col-sm-12">
    <div class="card">
      <div class="card-body">
        <div class="form-check">
          <input type="checkbox" class="check">
        </div>
        <h4 class="card-title">
          Description 2
          <a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id2">
            <i class="fas fa-trash-alt" disabled="disabled">Delete</i>
          </a>
        </h4>
      </div>

    </div>
    <br>
  </div>
  <div class="col-sm-12">
    <div class="card">
      <div class="card-body">
        <div class="form-check">
          <input type="checkbox" class="check">
        </div>
        <h4 class="card-title">
          Description 3
          <a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id3">
            <i class="fas fa-trash-alt" disabled="disabled">Delete</i>
          </a>
        </h4>
      </div>

    </div>
    <br>
  </div>
</div>

当我选中复选框时，有没有办法让每张卡片都显示删除图标？

Is there a way to make the delete icon appear for every card when I checked the checkbox?

javascript

css

dom

ejs

node.js