此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
aria-checked
aria-checked 属性指示复选框、单选按钮和其他小部件的当前"已选中"状态。
备注:
在可能的情况下,请使用带有 type="checkbox" 和 type="radio" 的 HTML <input> 元素,因为它们具有内置语义,并且不需要 ARIA 属性。
描述
aria-checked 属性指示元素是否被选中(true)、未选中(false)或者选中状态不确定(mixed),表示它既未被选中也未取消选中。mixed 值受到 checkbox 和 menuitemcheckbox 的三态输入角色支持。
mixed 值不受 radio、menuitemradio 或 switch 以及继承自这些角色的元素支持。如果不支持 mixed,则值将为 false。
html
<span
role="checkbox"
id="checkBoxInput"
aria-checked="false"
tabindex="0"
aria-labelledby="chk15-label"></span>
<label id="chk15-label">订阅时事通讯</label>
tabindex 属性是为了启用焦点。需要 JavaScript 切换 aria-checked 状态。如果此复选框是可提交表单的一部分,则需要更多 JavaScript 来设置名称和值。
以上代码也可以写为:
html
<input type="checkbox" id="chk15-label" name="Subscribe" />
<label for="chk15-label">订阅时事通讯</label>
通过使用具有 type="checkbox" 的 <input> 元素而不是 ARIA,无需任何 JavaScript。
值
- false
-
元素支持被选中,但当前未被选中。
- true
-
元素被选中。
- mixed
-
仅适用于
checkbox和menuitemcheckbox,相当于indeterminate,表示既不选中也不取消选中的混合模式值。 - undefined(默认)
-
元素不支持被选中。
关联角色
适用于以下角色:
关联接口
Element.ariaChecked-
Element接口的ariaChecked属性反映了aria-checked属性的值。 ElementInternals.ariaChecked-
ElementInternals接口的ariaChecked属性反映了aria-checked属性的值。
js
myHTMLElement.ariaChecked = true;
规范
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # aria-checked |
| Unknown specification |