JavaScript for loop inside a function not work

I’m new to JavaScript.

I want to add a loop inside a function ,so it can loop different ids.

Code:

 function toggleCheckboxArea(onlyHide = false) {
        var checkboxes = document.getElementById("myOptions1");
        var displayValue = checkboxes.style.display;
      
        if (displayValue != "block") {
          if (onlyHide == false) {
            checkboxes.style.display = "block";
          }
        } else {
          checkboxes.style.display = "none";
        }
      }

This function only used one of my ids ,document.getElementById(“myOptions1”); I modified this code ,to let it can loop through 2 ids :

  function toggleCheckboxArea(onlyHide = false) {
    var checkboxes = document.querySelectorAll('#myOptions1,#myOptions2');
    checkboxes.forEach(function(checkboxe){
        var displayValue = checkboxe.style.display;
        if (displayValue != "block") {
          if (onlyHide == false) {
            checkboxe.style.display = "block";
          }
        } else {
          checkboxe.style.display = "none";
        }
    })
  }

However after modifying ,the code not work ,I have no idea where is the bug. Any friend can help ?