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

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

Is this possible?

CodePudding user response：

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>

CodePudding user response：

This example loops through all the checkboxes and grabs the next element, which is assumed to be the label. If the div indicated doesn't begin with "Default" it will check the box.

const allCheckboxes = document.querySelectorAll("input[type='checkbox']");

for (let checkbox of allCheckboxes) {
  // get the label element and locate the appropriate div within
  let appropriateDiv = checkbox.nextElementSibling.querySelector("div.List div div");
  if (appropriateDiv && !appropriateDiv.innerText.startsWith("Default")) {
    checkbox.checked = true;
  }
}

<table><tbody>
<tr>
    <td><span title="original"><input id="a0" type="checkbox" name="orginal_a0" value="0"><label for="a0">
          <div >
            <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 >
            <div>
              <div>New Thing</div>
            </div>
          </div>
        </label></span></td>
  </tr>
</tbody></table>