Checkbox在iOS端无法正常工作，其余操作系统可正常运行的问题求助

• iOS WebKit 内核（所有iOS端浏览器均使用该内核）对原生表单控件的热区处理逻辑和桌面端不一致：你强行给原生checkbox设置了700px宽、75px高的非标准尺寸，但没有清除原生控件的默认外观，此时iOS下控件的实际可点击热区仍然是系统默认的12~16px见方的大小，用户点击视觉上的大区域时根本无法命中可交互区域，自然不会触发事件。桌面端浏览器会自动把控件热区拉伸到设置的宽高，所以桌面端运行正常。
• 原生checkbox绑定的onclick事件在iOS上存在触发兼容性问题，部分场景下点击完成后不会正常执行绑定逻辑，使用onchange事件兼容性更好。

1. 调整CSS样式，统一热区逻辑 #

清除iOS下原生控件的默认外观，让你设置的整个宽高区域都成为可点击热区，同时自定义选中状态样式，避免清除外观后看不到选中反馈：

#accept {
  width: 700px;
  height: 75px;
  font-size: 0.5em;
  /* 清除iOS原生控件默认外观 */
  -webkit-appearance: none;
  appearance: none;
  border: none;
  position: absolute;
  left: 30%;
  top: 80%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* 自定义未选中样式 */
  background-color: #f1f3f4;
}
/* 自定义选中状态样式 */
#accept:checked {
  background-color: #1a73e8;
}

2. 调整事件绑定逻辑 #

将原来的onclick替换为onchange，适配iOS的事件触发机制：

<input id="accept" type="checkbox" name="accept" value="1" onchange="terms_changed(this)">

3. 额外优化 #

• 可以直接在提交按钮的HTML标签上默认加disabled属性，避免页面加载时初始状态不一致：

<button id="submit" disabled>提交</button>

• 如果后续出现点击区域被其他元素遮挡的问题，可以给checkbox加z-index: 999确保其在最上层可交互。

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