目標：點擊空白處，收起左邊樣式標籤

方法：嘗試點空白處，使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;
}

注意：

1.監聽要使用target

2.查看資料直接用e，非e.target