仅使用 javascript 如何选择复选框？

Question

我正在尝试使用 javascript 创建一个书签来标记与 aria-labelledby=:picasa-checkbox-280-label" 相对应的复选框。该网页不允许我使用 jquery 代码，并且我无法在在 jquery 中编写代码的页面。

最终目标是输入多个不同的 # 标签并选中所有复选框

<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>

我当前的思路是使用 click() 函数来选择复选框，但这给了我一个错误

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

但这给了我一个错误

Uncaught TypeError: Cannot read properties of null (reading '0')

Answer 1

假设选择器存在。

querySelector 如果存在至少一个与查询匹配的元素，则选择一个元素。 querySelectorAll 选择与此查询匹配的所有元素

在您的情况下，您正在访问数组

[0]

，当它只是一个元素时，错误还表明选择器为空。所以也许选择一个更好的选择器。不确定如何表示

picasa-table-cell

，所以我留下一些建议

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

如果你想避免元素不存在时出现错误：

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

如果您想单击所有未选中的：

javascript: (function() {
    var checkboxes = document.querySelectorAll('[aria-labelledby="picasa-checkbox-280-label"] .picasa-checkbox__input');

    checkboxes.forEach(function(checkbox) {
        if (checkbox && !checkbox.checked) { // Check if checkbox exists and is not already checked
            checkbox.click();
        }
    });
})();

或者也许这个选择器：

#picasa-checkbox-280-label .picasa-checkbox__input

效果会更好