当aria-checked为true时能否显示元素？相关实现问题求助

原代码的关键问题： #

• elems2是HTMLCollection集合，不能直接调用getAttribute，必须遍历每个元素单独获取属性
• 循环条件里的t未定义，应该改为r++来正常遍历
• aria-checked属性的值是字符串类型的"true"，不是布尔值true，直接对比== true会不匹配
• 缺少点击事件监听，代码只在初始化时执行一次，没有响应用户的点击操作

修正后的完整代码： #

// 初始化隐藏所有wapf元素
var elems1 = document.getElementsByClassName('wapf');
for (var i = 0; i < elems1.length; i++) {
    elems1[i].style.display = 'none';
}

// 获取所有选项按钮
var elems2 = document.getElementsByClassName('button-variable-item-resize');

// 给每个按钮添加点击事件监听
for (var r = 0; r < elems2.length; r++) {
    elems2[r].addEventListener('click', function() {
        // 遍历所有按钮，根据aria-checked状态控制对应wapf元素的显示
        for (var idx = 0; idx < elems2.length; idx++) {
            var isChecked = elems2[idx].getAttribute('aria-checked') === 'true';
            elems1[idx].style.display = isChecked ? 'block' : 'none';
        }
    });
}

补充说明： #

• 点击事件内重新遍历所有按钮，适配单选场景（如果是多选逻辑，可调整为只处理当前点击的按钮）
• 确保elems1和elems2的元素数量一一对应，索引匹配逻辑才有效；如果数量不对应，需要通过自定义属性（比如data-target）绑定元素间的关联关系

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