谷歌Chrome书签脚本实现指定单选框（Option 2）选中问题求助

开发者阿泽

2026-7-9

解决Angular Material单选框书签脚本无效的问题

问题根源

Angular框架会自行维护组件的状态，直接修改DOM元素的checked属性属于绕过框架的操作，不会触发组件内部的状态更新与变更检测，所以视觉上看不到效果。另外，mat-radio-2-input这类类名是动态生成的，索引位置也可能随页面渲染变化，稳定性差。

可行解决方案

1. 模拟用户点击（推荐）

直接触发单选框的点击事件，让Angular正常处理组件状态变更：

javascript:(function(){
  // 遍历单选框标签，通过文本匹配找到Option 2
  const radioLabels = document.querySelectorAll('label.mat-radio-label');
  for(const label of radioLabels) {
    if(label.textContent.trim() === 'Option 2') {
      const radioInput = label.querySelector('input.mat-radio-input');
      if(radioInput) radioInput.click();
      break;
    }
  }
})();

2. 修改属性并触发框架事件（进阶）

如果要通过修改checked属性实现，需手动触发Angular监听的输入/变更事件：

javascript:(function(){
  // 优先用value属性定位（可在页面检查元素确认Option 2的value值）
  const radioInput = document.querySelector('input.mat-radio-input[value="2"]');
  if(radioInput) {
    radioInput.checked = true;
    // 触发Angular识别的事件
    radioInput.dispatchEvent(new Event('input', {bubbles: true}));
    radioInput.dispatchEvent(new Event('change', {bubbles: true}));
  }
})();