如何用JavaScript实现CheckBox勾选显示On、取消显示Off？

你的代码目前无法正确区分复选框的勾选和取消状态，主要问题在于事件绑定对象错误以及状态判断逻辑缺失，以下是修复方案：

问题分析 #

• 绑定点击事件的是父容器.val，会导致点击标签或容器空白区域也触发事件，且无法精准定位单个复选框的状态
• 使用$('.Checkbox:checked').val()会获取所有选中复选框的值，无法对应到当前操作的单个复选框

修复代码 #

直接监听Bootstrap Toggle复选框的change事件，精准判断当前复选框的状态：

// 监听每个复选框的状态变化事件
$('.Checkbox').on('change', function() {
    // 根据当前复选框的选中状态输出对应文本
    const status = $(this).is(':checked') ? 'On' : 'Off';
    console.log(status);

    // 可选：获取当前复选框对应的应用名称
    const appName = $(this).closest('.val').find('span').text();
    console.log(`${appName} 状态：${status}`);
});

补充说明 #

如果你的Bootstrap Toggle插件没有自动初始化复选框，可手动添加初始化代码：

$('.Checkbox').bootstrapToggle();

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