如何使用JavaScript将Bootstrap开关从OFF状态切换至ON状态

先理清楚你的开关状态对应关系：

• 你的开关初始是checked，对应Bootstrap Switch的on状态，此时显示data-on-text的内容：OFF
• 开关的off状态对应unchecked，会显示data-off-text的内容：ON

你要实现从OFF（当前on状态）切换到ON（off状态），理论上$('.alert-status').bootstrapSwitch('state', false);是正确的逻辑，但没生效大概率是执行时机或初始化的问题，下面是具体解决方案：

1. 确保脚本在DOM就绪后执行 #

Bootstrap Switch需要先完成初始化才能调用state方法，把代码放到DOM就绪事件里：

$(document).ready(function() {
  // 手动初始化开关（如果页面没有自动初始化的话）
  $('.alert-status').bootstrapSwitch();
  // 切换到ON状态（即开关的off状态），第三个参数true会触发change事件，可选
  $('.alert-status').bootstrapSwitch('state', false, true);
});

2. 直接操作原生checkbox（备选方案） #

如果调用组件方法不生效，可以直接修改checkbox的状态并触发更新：

$(document).ready(function() {
  $('.alert-status').prop('checked', false).trigger('change');
});

Bootstrap Switch会监听checkbox的change事件来同步UI状态。

3. 使用ID选择器提升精准度 #

如果页面存在多个同类型开关，用ID选择器定位更准确：

$('#ab1').bootstrapSwitch('state', false);

验证当前状态 #

可以先打印当前开关状态确认逻辑是否正确：

console.log($('#ab1').bootstrapSwitch('state')); // 初始应该返回true，对应显示OFF

如果输出true，说明当前是on状态，设置为false就会切换到显示ON的状态。

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