如何通过点击特定区块外部实现checkbox的选中/取消选中？

首先先修复你原有代码的CSS语法问题：#btn:checked + #box 选择器后漏了左大括号，会导致显示逻辑本身失效。
点击外部关闭的核心逻辑靠事件冒泡判断实现，不需要给页面其他元素逐个绑定事件：

• 给document绑定全局点击监听
• 点击触发时先判断当前box是否处于显示状态（即checkbox是否为选中态），如果本来就是隐藏的直接跳过逻辑
• 排除两种不需要关闭的场景：点击的是控制显示的checkbox本身、点击的是box内部区域
• 其余所有点击场景，直接将checkbox的选中态设为false，box就会按照原有CSS规则自动隐藏

完整可运行代码 #

<input type="checkbox" id="btn">
<div id="box"></div>

<style>
#box {
    display: none;
    width: 100px;
    height: 100px;
    /* 测试用背景，可按需删除 */
    background: #eee;
    border: 1px solid #ccc;
}
/* 修复原CSS缺失的左大括号 */
#btn:checked + #box {
    display: block;
}
</style>

<script>
const triggerBtn = document.getElementById('btn');
const contentBox = document.getElementById('box');

// 点击box内部时阻止事件冒泡，避免误触发关闭
contentBox.addEventListener('click', e => e.stopPropagation());

// 全局点击判断
document.addEventListener('click', e => {
    if (!triggerBtn.checked) return;
    // 点击checkbox本身走原生交互，不额外处理
    if (e.target === triggerBtn) return;
    // 其余外部点击直接取消勾选
    triggerBtn.checked = false;
});
</script>

注意点 #

• 这个实现不会破坏原有checkbox控制显隐的原生逻辑，不需要额外写控制显隐的样式代码
• 全局监听的方式性能更好，后续页面新增元素也不需要重新绑定事件
• 如果box内部有嵌套的子元素，阻止box的点击冒泡就可以覆盖所有内部点击场景，不需要单独给子元素做判断

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