Bootstrap 5+jQuery 3.6.0环境下如何为开关式checkbox添加选中/取消选中事件处理程序

问题根因 #

你当前将点击事件绑定到了外层的<div id="checkboxLondon">容器上，div元素本身不存在checked状态属性，所以$(this).is(":checked")的判断永远返回false，才会出现只有取消选中逻辑被触发的假象。

可行解决方案 #

推荐优先使用change事件绑定到实际的复选框元素上，该事件仅在表单控件状态实际变更时触发，兼容鼠标、键盘操作的切换场景，适配Bootstrap开关的交互逻辑，代码如下：

$('#flexSwitchCheckDefault').change(function () {
    console.log("状态变更触发");
    if ($(this).is(":checked")) {
        console.log("Checkbox is checked");
    } else {
        console.log("Checkbox is unchecked");
    }
});

如果确实需要绑定事件到外层div容器，修改状态判断逻辑即可：

$('#checkboxLondon').click(function () {
    console.log("外层点击触发");
    // 获取内部实际的复选框元素判断状态
    const $targetCheckbox = $(this).find('.form-check-input');
    if ($targetCheckbox.is(":checked")) {
        console.log("Checkbox is checked");
    } else {
        console.log("Checkbox is unchecked");
    }
});

以上方案在Bootstrap 5 + jQuery 3.6.0环境下可正常运行。

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