如何通过 Bookmarklet 快速选中指定 ID 的单选按钮-js教程-PHP中文网

本文介绍如何创建一个 chrome 书签（bookmarklet），精准定位并选中页面中具有特定 id 的单选按钮，包含可直接使用的 javascript 代码、调试技巧及常见注意事项。

本文介绍如何创建一个 chrome 书签（bookmarklet），精准定位并选中页面中具有特定 id 的单选按钮，包含可直接使用的 javascript 代码、调试技巧及常见注意事项。

要实现一键选中如 Angular Material 文档页中 “Option 2” 这类单选按钮，关键在于准确获取元素并触发状态变更。虽然你尝试使用 getElementsByClassName('mat-radio-2-input')[1]，但该方式存在两个核心问题：一是类名可能动态生成或重复出现，不具备唯一性；二是未触发浏览器原生的交互事件（如 change），导致 UI 未同步更新（尽管 DOM 属性已修改）。

✅ 推荐方案：使用 getElementById() 直接定位——它高效、稳定、语义明确。经检查目标页面源码，“Option 2” 对应的元素 ID 为 mat-radio-3-input（注意：ID 并非按视觉顺序线性编号，需以实际 DOM 为准）。

以下是可直接保存为书签的完整 Bookmarklet 代码：

javascript:(function() {
  const radioButton = document.getElementById('mat-radio-3-input');
  if (radioButton && radioButton.type === 'radio') {
    radioButton.checked = true;
    // 触发 change 事件，确保框架（如 Angular）响应状态变化
    radioButton.dispatchEvent(new Event('change', { bubbles: true }));
  } else {
    alert('❌ 单选按钮未找到，或目标元素不是 radio 类型。请检查 ID 是否正确。');
  }
})();

? 使用步骤：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

复制上方整段代码（含 javascript: 前缀）；
在 Chrome 中右键书签栏 →「添加网页」→ 名称填“Select Option 2”，网址粘贴代码；
访问目标页面（如 Angular Radio Overview）后，点击该书签即可生效。

⚠️ 重要注意事项：

ID 是动态的：不同版本或渲染状态下 ID 可能变化（如 mat-radio-4-input），务必通过开发者工具（F12 → Elements → 搜索 “Option 2”）实时确认最新 ID；
必须触发事件：仅设置 checked = true 不足以通知前端框架更新视图，dispatchEvent(new Event('change')) 是关键补充；
跨域限制：Bookmarklet 在当前页面上下文执行，不受同源策略限制，但无法操作 iframe 内容（除非同源）；
兼容性：代码兼容现代 Chrome、Edge、Firefox，无需额外 polyfill。

? 进阶提示： 若需适配多个选项，可将 ID 封装为参数，例如：
javascript:(function(id){...})('mat-radio-3-input'); —— 但需手动修改书签内容，灵活性略低。生产环境建议结合用户脚本（如 Tampermonkey）实现更健壮的自动化逻辑。

掌握这一技巧，你不仅能快速调试表单组件，还能为日常测试、自动化操作构建轻量级工具链。