Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Check a checkbox based on text that follows in a different div?

Is there a way to check checkboxes based on text that follows them? An App at work that requires me to check ALOT of boxes depending on the text that follows. Seems like it could be done programmatically, but it’s definitely beyond my limited knowledge

Here’s an obscured snippet of the page.

  <tr>
    <td><span title="original"><input id="a0" type="checkbox" name="orginal_a0" value="0"><label for="a0">
          <div class="List">
            <div>
              <div>Default Thing</div>
            </div>
          </div>
        </label></span></td>
  </tr>
  <tr>
    <td><span title="original"><input id="a1" type="checkbox" name="original_a1" value="1"><label for="a1">
          <div class="List">
            <div>
              <div>New Thing</div>
            </div>
          </div>
        </label></span></td>
  </tr

I know I could based on the input id or name, but unfortunately they don’t help identify if I should or should not check the box. It’s the text that follows the box that’s important. If iIcould make it so it would check any box that begin with "New" or any other text, but also not check the ones that begin with "Default". So in the example above I’d check the 2nd box and not check the 1st one. In the app it’s generally checking 50-75 boxes but leaving a similar amount unchecked. Ideally it would be something I could just type into the console or make into a bookmarklet.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Is this possible?

>Solution :

You could loop over all the cells, check if the text doesn’t begin with default and set the checked state to the input

As a side note it’s better to not nest a div element inside an inline element like a span or a label

const td = document.querySelectorAll('td');
[...td].forEach((cell) => {
  const text = cell.textContent.trim();
  if (!text.match(/^default/i)) {
    cell.querySelector('input').checked = true;
  }
});
<table>
  <tr>
    <td>
      <span title="original">
        <input id="a0" type="checkbox" 
               name="orginal_a0" value="0">
        <label for="a0">Default Thing</label>
      </span>
    </td>
  </tr>
  <tr>
    <td>
       <span title="original">
         <input id="a1" type="checkbox" 
                name="original_a1" value="1">
         <label for="a1">New Thing</label>
       </span>
    </td>
  </tr>
</table>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading