当使用 CSS 选中复选框时，如何切换 div 的可见性？

Question

我已经尝试了几种方法来做到这一点，包括通过 javascript，但我无法弄清楚。 我有一个表，header 包含一个“全选”复选框，每个条目都有一个复选框。

适用html：

<table>
  <thread>
    <tr>
      <th class="border-top-0"><input type="checkbox" id="selectAll" value="selectAll"></th>
    </tr>
  </thread>
<tbody>
  <td>
    <%= check_box_tag "contacts[]", contact.id %>
  </td>

理想情况下，我希望在选中任何复选框时显示一个隐藏的 div。 我通过 Javascript 部分地能够完成这个：

  var checkboxes = document.querySelectorAll('input#contacts_');
  //var selectAll = document.querySelector('input#selectAll');
  var checkCount = 0;

  checkboxes.forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
      checkbox.checked ? checkCount++ : checkCount--;
      checkCount > 0 ? actionsContainer.style.opacity = '1': actionsContainer.style.opacity = '0';
      console.log(checkCount)
    });
  });

但是，当检查“选择所有”复选框时，其他复选框未注册为被检查，除非未选择联系然后重新选择联系人，否则我将无法显示隐藏的div。 我还尝试向selectAll变量添加一个单独的事件侦听器，但结果一团糟。

所以我正在尝试 CSS 解决方案：

  input[type='checkbox']:checked.mobile-actions {
    opacity: 1;
  }

计算如果每个复选框都是input[type="checkbox"]它们都会被触摸并且移动操作 div 会显示。 但这似乎也不起作用。 我怎样才能完成这个？

Answer 1

在表<table class='items'>添加一个 class

为点击整个 class 创建事件侦听器，并根据点击的项目处理它。 例如：

 const itemsTable = document.querySelector('.items'); const items = document.querySelectorAll('.item'); // Class of each item itemsTable.addEventListener('click', (e) => { const traget = e.target.className; if(target === 'selectAll') { for(const n of items) { if(n.parentNode.parentNode.hidden === true) n.parentNode.parentNode.hidden = false; if(n.checked === true) console.log('I am checked'); if(n.checked === false) console.log('I am unchecked'); } } if(target === 'item') { /// Do something } }

以同样的方式在这个监听器中你可以监听单个项目的点击，所以你不需要为每个项目单独添加事件监听器。

在您选中/取消选中某个项目的同时，您可以更改其样式以隐藏它或任何您想要的东西。

Answer 2

我终于能够通过 Javascript 解决问题：

   document.addEventListener('change', function() {
    arr = [];
    checkboxes = document.querySelectorAll('input[type="checkbox"]');

    for (i = checkboxes.length -1; i >= 0; i--) {
      if (checkboxes[i].checked) {
        arr.push(checkboxes[i].value);
      }
    }

    arr.length > 0 ? actionsContainer.style.opacity = '1' : actionsContainer.style.opacity = '0' 
  });