关于复选框通过addEventListener的click事件实现Div显隐失效的问题咨询

补充说明：我怀疑当前问题可能和页面刷新时元素显示后消失的JS点击事件相关，但还没完全确认。

我写了一段控制复选框显隐Div的JavaScript代码，单独测试时是正常工作的，但放到我做的产品筛选功能里就出问题了：勾选复选框时Div能正常显示，可取消勾选时Div却没法隐藏。而且项目里没办法直接给复选框添加onclick属性，只能用addEventListener来绑定事件。我想问问，能不能给同一个元素绑定两个click事件，一个负责触发显示、另一个负责触发隐藏？

下面是我单独测试时能用的代码：

<form>
  <input class="input" type="checkbox" id="checkbox-id">
</form>
<div id="showDiv">Show / hide</div>

#showDiv {
  display: none;
  width: 100%;
  background-color: #252525;
  color: #ffffff;
}

const check = document.getElementById("checkbox-id");
if (check) {
  check.addEventListener('click', event => {
    this.event = event;
    if (check.checked) {
      document.getElementById("showDiv").style.display = "block";
    } else {
      document.getElementById("showDiv").style.display = "none";
    }
  });
}

我试过下面这种写法（还有其他一些方案），但始终没法在Div显示后把它隐藏起来。目前只有click事件能让Div正常显示出来，如果需要更多信息我随时提供，谢谢大家！

const general   = document.getElementById("checkbox-id");
const checkOpen = () => {
  document.getElementById("showDiv").style.display = "block";
}
const checkClosed = () => {
  document.getElementById("showDiv").style.display = "none";
}
if (element) {
  element.addEventListener('click', event => {
    this.event = event;
    checkOpen();
    checkClosed();
  });
}

备注：内容来源于stack exchange，提问作者Bill