如何获取Office Fabric UI中Toggle组件的开关状态值

你之前的代码存在两个明显错误：

• 选择器使用错误：demo-toggle-3是input元素的id属性，你使用类选择器.demo-toggle-3无法匹配到对应元素
• 取值属性错误：checkbox类型的input元素开关状态存储在checked布尔属性中，和textContent无关

你可以任选以下两种方法获取状态： #

方法1：直接读取原生DOM属性（最简单） #

直接通过id获取内置的checkbox元素，读取其checked属性即可，返回值为布尔类型：

// true 代表开启状态（On），false 代表关闭状态（Off）
const toggleIsOn = document.getElementById('demo-toggle-3').checked;

// 如果需要获取文本状态可以自行转换
const toggleStateText = toggleIsOn ? 'On' : 'Off';

方法2：通过Fabric组件实例获取（适合需要调用组件其他API的场景） #

初始化时存储组件实例，后续直接读取实例的checked属性即可：

// 初始化时存储所有Toggle实例
const toggleInstances = [];
const ToggleElements = document.querySelectorAll(".ms-Toggle");
for (let i = 0; i < ToggleElements.length; i++) {
  toggleInstances.push(new fabric['Toggle'](ToggleElements[i]));
}

// 取值时读取对应实例的checked属性
const firstToggleIsOn = toggleInstances[0].checked;

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