Office加载项中如何用JavaScript获取复选框选中状态及区分aria-checked？

嘿，我来帮你搞定这个问题！先咱们先把checked和aria-checked的区别掰扯清楚，再看具体怎么获取状态：

两者的核心区别 #

• 原生input的checked属性：这是复选框的真实选中状态，浏览器靠它来判断控件是否被勾选，值是布尔类型（true/false），是最可靠的状态源。
• aria-checked属性：这是ARIA（无障碍富互联网应用）规范里的属性，专门给屏幕阅读器等辅助技术用的，用来告知视障用户控件的状态。在你用的Fluent UI复选框里，这个属性会和原生input的checked自动同步，但它的值是字符串类型（"true"/"false"，还可能有"mixed"表示半选状态）。

获取选中状态的两种方法 #

方法1：优先获取原生input的checked（推荐） #

直接操作原生的复选框input元素，这是最准确的方式：

// 通过id拿到input元素
const checkboxInput = document.getElementById('inputId');
// 获取真实选中状态，返回布尔值
const isChecked = checkboxInput.checked;
console.log('复选框是否选中：', isChecked);

方法2：获取aria-checked状态 #

如果需要获取辅助属性的状态，也可以这么做，注意要把字符串转成布尔值：

// 通过id拿到label元素
const checkboxLabel = document.getElementById('labelId');
// 获取aria-checked的字符串值
const ariaCheckedValue = checkboxLabel.getAttribute('aria-checked');
// 转换为布尔值
const isCheckedFromAria = ariaCheckedValue === 'true';
console.log('从aria-checked判断的选中状态：', isCheckedFromAria);

额外提醒 #

在Fluent UI的组件逻辑里，用户点击复选框时，框架会自动同步input的checked和label的aria-checked，所以正常情况下两者状态是一致的。但强烈建议优先用原生input的checked，因为万一出现手动修改DOM没触发框架更新的情况，checked能保证拿到真实状态，而aria-checked可能会滞后。

内容的提问来源于stack exchange，提问作者Manuel Herrera Ojea