如何用JavaScript实现勾选指定aria-labelledby的复选框（书签工具）

需要做一个JavaScript书签工具，批量勾选页面中aria-labelledby属性为picasa-checkbox-{编号}-label的复选框，页面无法使用jQuery及Jquerify工具。之前尝试的代码报错，报错信息为Uncaught TypeError: Cannot read properties of null (reading '0')。

页面DOM结构如下：

<picasa-table-cell max-width="50px" class="picasa-table__cell hydrated" role="cell" style="width: 1%; min-width: 1.4286rem; max-width: 50px; text-align: left;">
<!---->
    <picasa-checkbox role="checkbox" aria-disabled="false" aria-checked="false" aria-labelledby="picasa-checkbox-280-label" class="hydrated">
        #shadow-root (open)
            <label id="picasa-checkbox-280-label" class="picasa-checkbox">
                <div class="picasa-checkbox__container">
                    <input class="picasa-checkbox__input" type="checkbox" name="" value="">
                    <span class="picasa-checkbox__checkmark"></span>
                    </div>
                    <slot></slot></label>
        
        </picasa-checkbox>
</picasa-table-cell>

原错误代码：

javascript: (function() {
document.querySelector('.element[aria-labelledby="picasa-checkbox-280-label"]')[0].click();
})();

错误原因分析 #

1. 选择器错误：原代码用.element作为元素类名，但目标元素是picasa-checkbox，没有这个类，导致querySelector返回null，后续访问[0]触发类型错误。
2. 方法使用错误：querySelector返回单个匹配元素，不是数组，不需要加[0]；如果要选多个元素应该用querySelectorAll。
3. shadow root访问问题：复选框的实际<input>在picasa-checkbox的开放shadow root内，直接点击外部的picasa-checkbox元素可能无法正确触发勾选状态，需要访问shadow root内的元素。

解决方案：批量勾选书签工具代码 #

以下是支持批量输入编号的书签代码，输入框中用逗号分隔多个编号（比如280,300,456）即可批量勾选：

javascript: (function() {
    // 弹出输入框获取编号列表，逗号分隔
    const input = prompt('请输入要勾选的复选框编号（逗号分隔）：');
    if (!input) return;
    
    // 拆分编号并去重处理
    const ids = input.split(',').map(id => id.trim()).filter(id => id);
    
    ids.forEach(id => {
        // 构建目标元素的选择器
        const selector = `picasa-checkbox[aria-labelledby="picasa-checkbox-${id}-label"]`;
        const checkboxEl = document.querySelector(selector);
        
        if (!checkboxEl) {
            console.warn(`未找到编号为${id}的复选框`);
            return;
        }
        
        // 访问开放的shadow root，找到实际的input复选框
        const shadowInput = checkboxEl.shadowRoot.querySelector('.picasa-checkbox__input');
        if (shadowInput && !shadowInput.checked) {
            shadowInput.click();
            // 同步更新自定义元素的aria-checked属性（可选，保证组件状态一致）
            checkboxEl.setAttribute('aria-checked', 'true');
        }
    });
})();

使用说明 #

1. 把上述代码复制到书签的URL栏中，命名为“批量勾选Picasa复选框”。
2. 在目标页面点击该书签，弹出输入框后输入需要勾选的编号（逗号分隔），点击确定即可批量勾选。

补充说明 #

• 因为picasa-checkbox是自定义元素，且shadow root为开放状态，所以可以直接通过shadowRoot属性访问内部DOM。
• 代码中同步更新aria-checked属性是为了保证组件的无障碍属性和视觉状态一致，部分自定义组件会依赖这个属性更新UI。

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