JS [撞墙] document.querySelector("").checked

目标：点击空白处，收起左边样式标签

方法：尝试点空白处，使input被点击，进而改变样式

 <input type="checkbox" id="side-menu-switch" />

  <div class="side-menu">
    ...
  </div>

.side-menu {
  /* X轴移动 起始 - 往左 先收起 */
  transform: translateX(-100%);
  /* 转场效果0.5秒 */
  transition: 0.3s all linear;
}

#side-menu-switch:checked + .side-menu {
  transform: translateX(0);
}

1. 从DOM元素下手，使HTML标签内移除 checked="checked"

    document
    .querySelector("#side-menu-switch")
    .removeAttribute("checked");

无法移除，因本身 <input type="checkbox" id="side-menu-switch" />
并无 checked="checked"

2. 因此尝试点击拉开处，HTML标签内新增 checked="checked"

     document
     .querySelector("#side-menu-switch")
     .setAttribute("checked", "checked");

而後重复动作1. 移除
第一次有效，此时<input type="checkbox" id="side-menu-switch" />
第二次後无效

3. 因此确认css :checked 除第一次後与 html checked="checked" 无关

得知HTML标签之checked="checked" 与 CSS #side-menu-switch:checked
无关後

4. How to check if a checkbox is checked using JavaScript?

https://flaviocopes.com/how-to-check-checkbox-checked/
检查css是否正在使用该虚拟Class,但用不到= =

5. Element.remove()

不对= =这是移除整个DOM。

6. 求救XD

把checkbox打开，监听点击後的target，确认内部有checked:true

document.querySelector("#side-menu-switch").addEventListener("click", checkEvent);

function checkEvent(e){
  console.log(e); // target > checked
 
}

灯愣!!!

allDomArray.forEach(function (item, index) {
  item = item.addEventListener("click", changeStatus);
});

function changeStatus(){
 document.querySelector("#side-menu-switch").checked = false;
}