根据不同 div 中后面的文本检查复选框？

Question

有没有办法根据复选框后面的文本来检查复选框？工作中的应用程序需要我根据后面的文本检查很多框。似乎可以通过编程方式完成，但这绝对超出了我有限的知识范围

这是页面的模糊片段。

  <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

我知道我可以根据输入的 ID 或名称，但不幸的是，它们无法帮助确定我是否应该选中该框。重要的是框后面的文本。如果我可以做到这一点，它会选中任何以“New”或任何其他文本开头的框，但也不选中以“Default”开头的框。因此，在上面的示例中，我会选中第二个框，而不选中第一个框。在应用程序中，它通常会选中 50-75 个框，但会留下类似数量的未选中框。理想情况下，我可以直接在控制台中输入或制作成书签。

这可能吗？

Answer 1

您可以循环遍历所有单元格，检查文本是否不以 default 开头，并将 checked 状态设置为 input

请注意，最好不要将 div 元素嵌套在 span 或 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>

Answer 2

此示例循环遍历所有复选框并获取下一个元素，假定该元素是标签。如果指示的 div 不是以“默认”开头，它将选中该框。

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 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>
</tbody></table>