Using Javascript to check a box in Gmail

Question

I'm working on creating a shortkey to add a label to an email in gmail.

<div class="J-LC" role="menuitemcheckbox" aria-checked="false" id=":4x3" title="Positive Responses" style="-webkit-user-select: none;">
  <div class="J-LC-Jz" style="-webkit-user-select: none;">
    <div class="J-LC-Jo J-J5-Ji" style="-webkit-user-select: none;"></div>
    Positive Responses
  </div>
</div>

When I simulate checking the box in Gmail and watch the DOM, this happens:

<div class="J-LC J-Ks-KO J-LC-JR-Jp" role="menuitemcheckbox" aria-checked="true" id=":4x3" title="Positive Responses" style="-webkit-user-select: none;">
  <div class="J-LC-Jz" style="-webkit-user-select: none;">
    <div class="J-LC-Jo J-J5-Ji" style="-webkit-user-select: none;"></div>
    Positive Responses
  </div>
</div>

Two things happen:

1.) aria-checked becomes True

2.) class is updated

I tried this: document.querySelector('div[title="Positive Responses"]').setAttribute("aria-checked", true)

And it changed the value to be True, but when looking at Gmail the box wasn't actually checked. Is the only way to do this is hard code in the update of class ?

Answer 1

I'm getting a different DOM than yours.

For me this worked -

Find the ID of the div with role=checkbox

Then document.getElementById(ID).click()