纯CSS实现点击其他元素取消input复选框的:checked伪类状态

纯CSS方案（需调整布局） #

无需JS，通过添加全屏覆盖层实现点击空白处取消选中，需要给复选框和label加一个容器：

修改后的HTML

<body>
  <div class="checkbox-container">
    <input type="checkbox" name="check" id="check" />
    <label for="check"></label>
  </div>
</body>

补充后的CSS

/* 新增容器样式 */
.checkbox-container {
  position: relative;
}

/* 选中时显示全屏透明覆盖层 */
input:checked ~ .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  content: "";
  z-index: 1;
}

/* 确保label在覆盖层上方，不影响点击切换 */
input + label {
  position: relative;
  z-index: 2;
}

/* 保留你原有的CSS代码 */
input {
  display: none;
}

input:checked + label {
  margin-left: 5em;
}

input + label::before {
  content: "Give margin";
  cursor: pointer;
}

input:checked + label::before {
  content: "No Margin";
}

原理：复选框选中时，生成一个全屏覆盖层，点击这个覆盖层（即页面空白区域）会触发复选框取消选中状态，同时保证label在覆盖层上方，不影响正常的切换操作。

JavaScript方案（无结构限制，更灵活） #

如果不想改动现有HTML结构，用JS监听页面点击事件，判断点击区域后手动取消选中：

修改后的HTML

<body>
  <input type="checkbox" name="check" id="check" />
  <label for="check"></label>

  <script>
    const checkbox = document.getElementById('check');
    const targetLabel = document.querySelector('label[for="check"]');

    document.addEventListener('click', (e) => {
      const isTarget = e.target === checkbox || e.target === targetLabel;
      if (!isTarget && checkbox.checked) {
        checkbox.checked = false;
      }
    });
  </script>
</body>

原理：监听整个文档的点击事件，当点击的元素不是复选框或其关联label时，且复选框处于选中状态，就将其checked属性设为false，实现点击外部取消选中的效果。

内容的提问来源于stack exchange，提问作者Nick