JavaScript实现点击非指定区域隐藏span及复选框状态控制

实现方案 #

核心优化点 #

• 修复原代码重复绑定全局点击事件、e.target.yes属性不存在的逻辑错误
• 修复HTML中重复ID的不符合规范问题
• 基于事件冒泡机制实现点击外部隐藏逻辑，代码更简洁易维护
• 补充Yes/No复选框的互斥逻辑，符合二选一选项的交互常识

完整代码 #

HTML

<p class="items">
  <span class="label">example</span>
  <span class="label-items">
    <label class="label-item" for="okey" id="confirm">
      <input type="checkbox" name="Yes" id="okey">
      Yes
    </label>
    <label class="label-item" for="no-checkbox">
      <input type="checkbox" name="No" id="no-checkbox">
      No
    </label>
  </span>
  <span class="yes-items" id="yes-items">
    <span>                                            
      <label for="Diabetic1">
        <input type="checkbox" name="Diabetic" id="Diabetic1">
        1
      </label>
    </span>
    <span>                                            
      <label for="Diabetic2">
        <input type="checkbox" name="Diabetic" id="Diabetic2">
        2
      </label>
    </span>
    <span>                                            
      <label for="Diabetic3">
        <input type="checkbox" name="Diabetic" id="Diabetic3">
        3
      </label>
    </span>
    <span>                                            
      <label for="Diabetic4">
        <input type="checkbox" name="Diabetic" id="Diabetic4">
        4
      </label>
    </span>
    <span>                                            
      <label for="DiabeticOther">
        <input type="checkbox" name="Diabetic" id="DiabeticOther">
        other
        <textarea class="explain" placeholder="Define Other" cols="50" rows="3"></textarea>                       
      </label>
    </span>
  </span>
</p>

CSS

.items {
  border: 1px solid red;
  padding: .5rem;
  border-radius: 10px;
}

span.yes-items {
  position: absolute;
  border: 2px solid var(--c1);
  color: var(--txt);
  background-color: #e6eef7;
  top: 20%;
  left: 0;
  width: 94%;
  padding: 1rem;
  border-radius: 10px;
  display: none;
}

span.yes-items input {
  width: auto;
}

JS

// 提前获取DOM元素，避免重复查询
const yesCheckbox = document.getElementById('okey');
const noCheckbox = document.getElementById('no-checkbox');
const yesItems = document.getElementById('yes-items');

// Yes复选框点击控制显示/隐藏
yesCheckbox.addEventListener('click', (e) => {
  // 阻止事件冒泡，避免触发全局隐藏逻辑
  e.stopPropagation();
  yesItems.style.display = yesCheckbox.checked ? 'block' : 'none';
  // 互斥逻辑：选中Yes时取消No的选中
  if (yesCheckbox.checked) noCheckbox.checked = false;
});

// 点击yes-items内部区域不触发隐藏
yesItems.addEventListener('click', (e) => {
  e.stopPropagation();
});

// 点击页面其他区域隐藏yes-items，不修改Yes复选框状态
document.body.addEventListener('click', () => {
  yesItems.style.display = 'none';
});

// No复选框点击逻辑
noCheckbox.addEventListener('click', () => {
  if (noCheckbox.checked) {
    // 清除Yes选中状态
    yesCheckbox.checked = false;
    // 隐藏yes-items
    yesItems.style.display = 'none';
  }
});

内容的提问来源于stack exchange，提问作者h.m.p.frontendDeveloper