Bootstrap开关式复选框如何获取选中状态值？

你这是用Bootstrap Switch插件生成的开关组件，页面上的<div>只是插件渲染出来的UI外壳，真正的checkbox元素被隐藏起来了，所以直接操作这个div的val()或者checked属性肯定没用。

给你两种有效的获取方式：

方法一：用插件自带的API #

Bootstrap Switch本身提供了获取状态的方法，直接用就行：

// jQuery写法
var isChecked = $('#myCheckbox').bootstrapSwitch('state');
// 如果要获取对应的ON/OFF文本，也可以这么写
var statusText = isChecked ? 'ON' : 'OFF';

方法二：找到隐藏的原生checkbox #

插件渲染时会保留原始的checkbox（一般是隐藏状态），你可以通过name属性定位到它：

// 原生JS写法
var realCheckbox = document.querySelector('input[name="bootStrap1"]');
var isChecked = realCheckbox.checked;
// 也能拿到checkbox的value值
var checkboxValue = realCheckbox.value;

// jQuery写法
var isChecked = $('input[name="bootStrap1"]').prop('checked');

额外提示 #

• 正常来说，这个开关是基于原生checkbox初始化的，原始代码大概是这样：

<input type="checkbox" id="myCheckbox" name="bootStrap1" checked>

然后通过$('#myCheckbox').bootstrapSwitch()渲染成你现在看到的div结构。

• 如果要监听开关状态变化，也可以用插件的事件：

$('#myCheckbox').on('switchChange.bootstrapSwitch', function(event, state) {
  console.log('当前开关状态：', state); // state是布尔值，true对应ON，false对应OFF
});

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