如何通过JobType属性而非ID勾选特定复选框？

我是JavaScript新手，现有一组带自定义JobType属性的复选框，不同页面中复选框的ID会动态变化，但JobType的取值（100、401、700）固定，希望通过JobType值来勾选对应复选框，替代依赖ID的方式。

示例HTML结构 #

<!DOCTYPE html>
<html>
<td class="griditemcell" align="center" valign="top">
<input id="JobGrid_cb_11135_150_100_0" type="checkbox" name="JobGrid$ctl02$cb_11135_150_100" JobID="11135" JobType="100" onclick="CheckBoxClicked(&#39;JobGrid_cb_11135_150_100_0&#39;,11135,150,100);" />
</td>
<td class="griditemcell" align="center" valign="top">
<input id="JobGrid_cb_43487_150_401_0" type="checkbox" name="JobGrid$ctl02$cb_43487_150_401" JobID="43487" JobType="401" onclick="CheckBoxClicked(&#39;JobGrid_cb_43487_150_401_0&#39;,43487,150,401);" />
</td>
<td class="griditemcell" align="center" valign="top">
<input id="JobGrid_cb_43502_150_700_0" type="checkbox" name="JobGrid$ctl02$cb_43502_150_700" JobID="43502" JobType="700" onclick="CheckBoxClicked(&#39;JobGrid_cb_43502_150_700_0&#39;,43502,150,700);" />
</td>
</html>

原方法（依赖ID） #

之前只能通过固定ID勾选：

javascript:
document.getElementById("JobGrid_cb_11135_150_100_0").checked=true;

新解决方案（依赖JobType属性） #

利用CSS属性选择器定位元素，不受ID变化影响：

1. 单个复选框勾选 #

要勾选指定JobType的复选框，比如JobType="100"：

document.querySelector('input[JobType="100"]').checked = true;
// 如果需要触发onclick事件，补充调用click()
// document.querySelector('input[JobType="100"]').click();

2. 批量勾选多个JobType #

如果要同时勾选多个指定值的复选框，比如100、401、700：

// 定义目标JobType数组
const targetTypes = ['100', '401', '700'];
// 获取所有带JobType属性的复选框
const checkboxes = document.querySelectorAll('input[JobType]');

// 循环匹配并勾选
checkboxes.forEach(box => {
  if (targetTypes.includes(box.getAttribute('JobType'))) {
    box.checked = true;
    // 触发点击事件（可选，根据需求决定）
    box.click();
  }
});

3. 控制台快捷执行代码 #

在浏览器控制台直接执行，快速勾选某个JobType：

javascript:document.querySelector('input[JobType="401"]').checked=true;

说明 #

属性选择器input[JobType="xxx"]可以精准匹配带有指定JobType属性值的复选框，无论ID如何变化，只要属性值固定就能定位到元素。如果需要触发复选框绑定的onclick逻辑，调用click()方法即可模拟用户点击行为。

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