How to show/hide menu based on checkbox(s) value with JavaScript?

---

I'm working on a simple checklist web app using pure vanilla html, css, javascript. I've been stuck on one part all weekend. Hoping someone can shed some light on what I'm missing or doing wrong. Here's where I'm at.

My Goal

Whenever an item in the checklist (ul) is selected (via checkbox), a hidden menu slides out with various options to manipulate the selected item(s). The menu must stay visible if any of the checkboxes within the list are checked. The menu must close if no checkboxes are checked.

Where I'm Stuck

I'm able to get the menu to slide out during a 'change' event of the checkbox, but I can't get the menu element to react after the initial change event. During debugging, it also appears the menu element is not reacting to the checkbox being in a 'checked' state, but simply just reacting to the checkbox being changed in general. Here's the JS code I have, but I've tested various other configurations with no success.

Code Pen with Full Code & Snippet of related JS code below. https://codepen.io/skazx/pen/JmdepR

var itemCheckBox = document.querySelectorAll('input[type="checkbox"]')
var statusChangeMenu = document.getElementById("status-change-menu")

for(var i = 0 ; i < itemCheckBox.length; i++){
  itemCheckBox[i].addEventListener("change", function(){

    if (!itemCheckBox.checked)
    {statusChangeMenu.style.height = "40px";}
    else 
    {statusChangeMenu.style.height = "0px";}
  })}

I've read a few dozen different post and articles but most were related to only having 1 checkbox or used jquery. Let me know if you need any further details. Thank you!