表单重置时onchange与onreset处理函数未更新CSS属性如何解决

问题核心原因 #

onreset事件仅支持绑定在<form>元素上，<input>元素本身不会触发reset事件，所以你绑定在复选框上的clearCheckboxes函数永远不会执行。

下面提供两种不需要PHP拼接动态代码、可直接适配动态生成复选框的解决方案：

方案1：纯CSS实现（推荐） #

直接通过CSS的:has()选择器匹配勾选状态的复选框父元素，自动处理样式，不需要写任何JS逻辑，不管是手动勾选/取消还是表单重置都会自动更新样式。
新增如下CSS代码即可：

/* 匹配包含已勾选复选框的li元素，添加outline */
li:has(input[type="checkbox"]:checked) {
  outline: 2px solid black;
}

用这个方案你可以直接删掉原来的doCheckboxes、clearCheckboxes函数，以及复选框上绑定的onChange、onReset属性，所有状态浏览器自动处理，完全适配PHP动态生成的复选框，不需要额外修改逻辑。

方案2：JS兼容方案（适配不支持:has()的老浏览器） #

如果你需要兼容不支持CSS :has()的旧版浏览器，只需要给表单绑定reset事件，统一处理所有复选框的样式即可：

1. 删掉所有复选框上的onReset属性（该绑定无效）
2. 新增如下JS代码：

// 绑定表单的reset事件
document.querySelector('form').addEventListener('reset', function() {
  // 表单reset事件触发时还未完成值重置，用setTimeout等待重置完成后更新样式
  setTimeout(() => {
    // 遍历所有复选框，调用现有函数更新样式即可
    document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
      doCheckboxes(checkbox.id);
    });
  }, 0);
});

这个方案会自动匹配页面上所有的复选框，不管是不是动态生成的，都能统一处理，不需要额外适配PHP输出的内容。

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