如何实现点击<button>复选框周边区域也能触发勾选？

你应该是想说 <input type="checkbox"> 而非 <button>，下面提供两种简单易实现的方案，不用复杂的JavaScript就能满足需求：

方法一：纯CSS实现（零JS，推荐） #

利用<label>标签的原生关联特性，给复选框包裹一个标签，通过CSS扩大可点击范围：

<form>
  <label class="checkbox-hit-area">
    <input type="checkbox" id="my-check">
    <span>我的选项</span>
  </label>
</form>

<style>
.checkbox-hit-area {
  /* 上下左右各加10px的可点击区域，数值可按需调整 */
  padding: 10px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* 可选：给选中状态加视觉反馈 */
.checkbox-hit-area input:checked + span {
  color: #2196F3;
}
</style>

• 核心逻辑：<label>和复选框绑定后，点击标签内任意区域都会触发复选框的选中/取消，通过padding就能轻松把可点击范围扩大到复选框之外的区域。

方法二：极简JS实现（适合不想改原有HTML结构的情况） #

如果不想调整现有DOM结构，给复选框的父容器加个点击事件即可：

<form>
  <div class="check-container">
    <input type="checkbox" id="my-check">
    <span>我的选项</span>
  </div>
</form>

<style>
.check-container {
  padding: 10px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
</style>

<script>
const container = document.querySelector('.check-container');
const checkbox = document.getElementById('my-check');

container.addEventListener('click', (e) => {
  // 点击的不是复选框本身时，切换选中状态
  if (e.target !== checkbox) {
    checkbox.checked = !checkbox.checked;
  }
});
</script>

• 核心逻辑：点击容器的任何区域（包括偏离复选框的位置），都会切换复选框的状态，同时保留复选框自身的点击逻辑。

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