Bootstrap Switch切换状态获取问题求助：事件未触发与状态捕获

我之前也碰到过类似的问题，咱们一步步来搞定它：

一、先排查switchChange.bootstrapSwitch事件不触发的核心原因 #

这个事件没触发，大概率是绑定时机不对或者选择器匹配有问题：

1. 必须先初始化开关，再绑定事件
   Bootstrap Switch的状态变更事件需要在组件初始化完成后绑定，顺序搞反就会失效，正确写法如下：

   // 第一步：先初始化Bootstrap Switch组件
   $('.switch').bootstrapSwitch();
   // 第二步：再绑定状态变更事件
   $('.switch').on('switchChange.bootstrapSwitch', function(event, state) {
     console.log('当前开关状态:', state); // state是布尔值，true为开，false为关
     // 这里写你的业务逻辑
   });
   

2. 检查选择器是否精准匹配
   确认你的开关元素类名确实是switch，如果不确定，可以用更通用的选择器定位：

   $('input[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
     console.log(state);
   });
   

二、如果用点击事件获取状态的替代方案 #

既然你已经能触发点击事件，那可以通过两种简单方式拿到当前状态：

1. 直接读取原生checkbox的checked属性
   Bootstrap Switch本质是基于原生checkbox封装的，所以可以直接获取：

   $(document).on('click', 'input', function(e) {
     const isChecked = $(this).prop('checked');
     console.log('当前开关状态:', isChecked ? '开启' : '关闭');
   });
   

2. 使用Bootstrap Switch内置方法获取状态
   如果你已经完成组件初始化，也可以用官方提供的方法直接获取：

   $(document).on('click', 'input', function(e) {
     const currentState = $(this).bootstrapSwitch('state');
     console.log('当前开关状态:', currentState);
   });
   

额外小提醒 #

如果还是不行，检查下Bootstrap Switch的版本，部分旧版本的事件名称可能不带命名空间，试试直接绑定switchChange事件，不过最新版本推荐用带命名空间的写法哦。

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