onclick绑定toggle切换显隐 checkmark元素点击触发失效排查

功能失效的核心原因是label默认行为导致事件重复触发：

• 按照HTML标准，<label>标签内部的任意可点击区域，都会自动触发标签关联的表单控件（即当前代码中id为giftbox的复选框）的点击事件，不需要额外给内部元素重复绑定事件。
• 当前代码给复选框和.checkmark元素都绑定了点击触发Toggle_Visibility的逻辑，点击.checkmark时会连续执行两次切换逻辑：
  1. 首先触发.checkmark自身绑定的事件，给目标div切换一次d-none类
  2. 紧接着label的默认关联行为会触发内部复选框的点击事件，再次执行Toggle_Visibility，把d-none类切回初始状态
• 两次连续切换等于没有改变类名状态，视觉上就表现为点击自定义复选框区域没有效果；直接点击原生复选框时不会触发额外的重复事件，因此功能正常。

你可以在Toggle_Visibility函数中添加日志打印验证：点击.checkmark时函数会连续执行2次。

二选一即可，不建议同时使用。

方案1（推荐，符合原生语义，代码最简洁） #

直接删除.checkmark元素上冗余的onclick绑定，依靠label的原生关联特性即可实现需求——点击label内任意区域（包括自定义的.checkmark）都会自动触发复选框的点击事件，只需要给复选框绑定一次逻辑就够了。
修改后的HTML片段：

<div class="form-field col-lg-12 mb-6">
  <label class="checkbox-container ps-4 cursor-pointer" id="orderasgift">
    <input id="giftbox" onclick="Toggle_Visibility('hidden-gift-order')" class="gift-order-checkbox" type="checkbox">
    <!-- 移除checkmark上的onclick绑定 -->
    <div class="checkmark"></div>
  </label>
</div>
<div class="d-none" id="hidden-gift-order">...</div>

原有JS和CSS代码不需要做任何修改，即可实现点击原生复选框、自定义复选框区域都能正常切换显隐的效果。

方案2（保留双元素绑定的场景使用） #

如果业务要求必须给两个元素分别绑定点击事件，需要在.checkmark的点击逻辑中阻止事件冒泡和默认行为，避免触发label的原生关联逻辑导致重复执行。
第一步修改JS函数，增加事件参数处理：

function Toggle_Visibility(p1, e) {
  // 阻止事件冒泡和默认关联行为，避免重复触发
  if (e) {
    e.stopPropagation();
    e.preventDefault();
  }
  document.getElementById(p1).classList.toggle("d-none");
}

第二步修改.checkmark的事件绑定，传入事件对象：

<div class="checkmark" onclick="Toggle_Visibility('hidden-gift-order', event)"></div>

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