如何通过label内容而非ID用JavaScript将复选框设为选中状态？

当然可以！你可以通过Label的文本内容定位到目标Label元素，再利用它的关联属性找到对应的复选框，最后设置选中状态。

方法一：通过Label的for属性获取复选框ID #

// 筛选出文本匹配的Label元素（用trim处理前后空格避免匹配失败）
const targetLabel = Array.from(document.querySelectorAll('label')).find(
  label => label.textContent.trim() === 'Reformatted CTI Phone'
);

if (targetLabel) {
  // 获取Label关联的复选框ID
  const checkboxId = targetLabel.getAttribute('for');
  // 找到复选框并设置选中
  const checkbox = document.getElementById(checkboxId);
  if (checkbox) {
    checkbox.checked = true;
  }
}

方法二：直接访问Label关联的控件（更简洁） #

现代浏览器支持Label元素的control属性，它会直接指向该Label绑定的表单控件，无需通过ID中转：

const targetLabel = Array.from(document.querySelectorAll('label')).find(
  label => label.textContent.trim() === 'Reformatted CTI Phone'
);

// 检查Label存在且关联了控件，直接设置选中
if (targetLabel?.control) {
  targetLabel.control.checked = true;
}

额外提示 #

如果页面存在多个文本相同的Label，find方法只会返回第一个匹配项，你可以结合父元素选择器等条件进一步缩小筛选范围，确保定位到正确的目标。

内容的提问来源于stack exchange，提问作者coderunner