iOS14及macOS Big Sur中Checkbox的onchange事件取消勾选不触发问题

问题现象 #

网站采用隐藏checkbox实现菜单交互，通过onchange事件触发JS函数动态调整内容容器透明度：勾选checkbox（打开菜单）时容器透明度切换为0.6，取消勾选（关闭菜单）时恢复为1。该功能在多数现代浏览器中正常，但在iOS14.8及macOS Big Sur的Safari中，取消勾选操作无法触发透明度恢复为1的逻辑。

可能原因 #

1. Safari对checkbox的onchange事件处理差异：旧版Safari中，checkbox取消勾选时的onchange事件可能存在触发延迟或绑定异常；
2. opacity值的精度问题：jQuery的css('opacity')在不同浏览器返回值可能存在浮点精度差异（如Safari可能返回0.6000000238418579而非精确的0.6），导致字符串比较逻辑失效；
3. 依赖当前opacity状态的不可靠性：若动画未完全结束就触发下一次事件，当前opacity值可能处于中间状态，导致判断逻辑出错。

解决方案 #

方案1：基于checkbox的checked状态直接判断（推荐）

放弃依赖当前opacity值，直接通过checkbox的选中状态决定透明度变化，逻辑更可靠且避免精度问题：

function menubackground() {
  const checkbox = event.target;
  if (checkbox.checked) {
    $(".fadeinobject").animate({"opacity": 0.6}, 230);
  } else {
    $(".fadeinobject").animate({"opacity": 1}, 230);
  }
}

HTML代码保持不变：

<input type="checkbox" onchange="menubackground()" />

方案2：修复opacity值的精度判断问题

将获取到的opacity值转为数字，使用模糊比较替代精确字符串匹配：

function menubackground() {
  const currentOpacity = parseFloat($('.fadeinobject').css('opacity'));
  if (Math.abs(currentOpacity - 0.6) < 0.01) {
    $(".fadeinobject").animate({"opacity": 1}, 230);
  } else {
    $(".fadeinobject").animate({"opacity": 0.6}, 230);
  }
}

方案3：替换事件为click（针对事件未触发的情况）

若确认onchange事件在取消勾选时未触发，可将事件替换为click：

<input type="checkbox" onclick="menubackground()" />

配合方案1的JS逻辑使用，确保每次点击都能正确触发状态判断。

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