jQuery Checkbox触发change事件无效问题求助

看起来你的问题出在两个关键点上：checkbox状态同步逻辑和事件触发的有效性，结合你的代码细节，我来一步步分析并给出解决方案：

核心问题分析 #

对比bindAllChecks和bindSwitches的代码，你会发现一个关键差异：

• 在bindAllChecks中，你先修改了checkbox的checked属性，再触发change事件，这完全符合浏览器原生change事件的触发逻辑（状态实质性变更后触发）；
• 但在bindSwitches中，你只修改了checkbox的value值，没有主动同步checked状态（即使依赖Materialize自动切换，也可能存在时机冲突），这会导致trigger("change")的行为不符合预期——很多事件监听器（包括你写的bindCheckboxOverride）是关联checked状态变更来执行逻辑的。

另外还有两个潜在坑：

1. 你的bindCheckboxOverride选择器是.checkbox-collection input[type=checkbox]:not(.select-all-check)，需要确认目标checkbox确实在.checkbox-collection容器内；
2. jQuery的trigger("change")有时候会和Materialize组件的原生事件监听机制冲突，改用原生事件触发可能更可靠。

修复后的bindSwitches函数 #

我调整了你的代码，确保状态同步+可靠触发事件：

const bindSwitches = function() { 
  $(document).on("click", ".lever", function() { 
    const $checkbox = $(this).siblings("input[type=checkbox]"); 
    const $hiddenField = $(this).siblings("input[type=hidden]"); 

    // 先同步checkbox的checked状态（覆盖Materialize自动切换，确保逻辑完全可控）
    const currentChecked = $checkbox.prop("checked");
    $checkbox.prop("checked", !currentChecked);

    // 根据新的checked状态设置value
    const newValue = currentChecked ? 0 : 1;
    $checkbox.prop("value", newValue); 
    $hiddenField.prop("value", newValue); 

    // 优先使用原生事件触发，确保委托监听器能稳定捕获到
    if ($checkbox[0]) {
      $checkbox[0].dispatchEvent(new Event('change', { bubbles: true }));
    }
    // 也可以保留jQuery的trigger作为 fallback
    // $checkbox.trigger("change");
  }); 
};

额外排查步骤 #

1. 验证选择器匹配：在bindCheckboxOverride的开头加一行console.log("Change event triggered!")，确认事件是否真的没触发；如果没输出，检查目标checkbox是否在.checkbox-collection内，或者是否误带了.select-all-check类；
2. 初始化顺序：确保bindCheckboxOverride()是在DOM加载完成后执行的（比如放在$(document).ready()里），且执行顺序在bindSwitches之前；
3. 检查hiddenField结构：bindCheckboxOverride中用$(this).prev()获取hiddenField，要确保checkbox的前一个元素确实是目标hidden输入框，否则即使事件触发，逻辑也不会执行。

为什么bindAllChecks能正常工作？ #

因为你在遍历checkbox时，明确修改了checked属性，这会让浏览器认为元素状态发生了实质性变更，此时无论用jQuery的trigger还是原生事件，委托监听器都能正常捕获到变更。

内容的提问来源于stack exchange，提问作者Danny Santos