One issue arises when using querySelectorAll as it returns an array-like object without a click() function. While the elements in this array-like object have individual click functions, they cannot be invoked directly from the array-like object (specifically a NodeList).
The solution proposed by @mplungjan involves this method:
photo.querySelectorAll('div[role="checkbox"]').forEach(div => div.click());
which works correctly.
However, you can also define a click function for a NodeList to enable running the initial code :)
NodeList.prototype.click = function() {
for (let item of this) item.click();
};
document.querySelectorAll(".hd").forEach(item => item.parentNode.querySelectorAll("[type=button]").click());
<div>
<input type="button" value="1" onclick="console.log(1)">
<input type="button" value="2" onclick="console.log(2)">
<input type="button" value="3" onclick="console.log(3)">
<input type="hidden" class="hd">
</div>
<div>
<input type="button" value="4" onclick="console.log(4)">
<input type="button" value="5" onclick="console.log(5)">
<input type="button" value="6" onclick="console.log(6)">
</div>
<div>
<input type="button" value="7" onclick="console.log(7)">
<input type="button" value="8" onclick="console.log(8)">
<input type="button" value="9" onclick="console.log(9)">
<input type="hidden" class="hd">
</div>
This illustrates that by defining a click function for a NodeList that triggers all elements within it, we can easily reuse it multiple times.
While @mplungjan's answer is accurate and deserving of acceptance, I opted to provide a new response on introducing the missed feature rather than finding workarounds.