How can I toggle the visibility of a div when a checkbox is checked with CSS?

Question

I've tried several ways to do this including through javascript but I cannot figure it out. I have a table, and the header contains a "select all" checkbox with a checkbox attached to each entry.

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

Ideally, what I would like to happen is for a hidden div to display when any checkbox is checked. I was partially able to accomplish this through Javascript with:

  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)
    });
  });

However, when the "select all" checkbox is checked, the other checkboxes are not registered as being checked and I cannot get the hidden div to show unless a contact is unselected and then reselected. I've also tried adding a separate event listener to the selectAll variable with messy results.

So I'm trying a CSS solution along the lines of:

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

figuring that if every checkbox is an input[type="checkbox"] they would all be touched and the mobile-actions div would display. But this doesn't seem to work either. How can I get this done?

Answer 1

Add a class to the table <table class='items'>

Create event listener for click on that entire class and handle it based on clicked item. For example:

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

The same way inside this listener you can listen to individual item click, so you don't add event listener for every item separately.

At the same time you are checking/unchecking an item, you can change its style to hide it or whatever you want.

Answer 2

I was finally able to solve the issue with 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' 
  });