在 chrome 控制台中批量勾选复选框时，仅设置 `checkbox.checked = true` 并不能触发浏览器的原生事件监听机制，导致表单验证失败或提交时忽略已勾选项；必须手动派发 `change` 事件才能使框架（如 react、vue）或原生表单逻辑识别状态变更。
现代网页应用（尤其是基于前端框架构建的系统）通常不直接读取 DOM 元素的 checked 属性值，而是依赖 change、input 等事件来同步内部状态与 UI。你当前的脚本虽然视觉上勾选了复选框，但未触发 change 事件，因此：
- 表单验证逻辑无法感知用户操作；
- 提交时校验失败（显示“请至少选择一项”等提示）；
- 前端框架（如 React 的受控组件）完全忽略该变更。
✅ 正确做法：在设置 checked = true 后，立即派发标准 change 事件：
// 查找页面所有复选框
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// 定义需排除的标签文本（精确匹配）
const excludedTexts = ['Firewall_Rule_Example_1'];
for (let i = 0; i < checkboxes.length; i++) {
const checkbox = checkboxes[i];
const label = checkbox.nextElementSibling;
// 跳过指定文本对应的复选框
if (label && excludedTexts.includes(label.textContent.trim())) {
continue;
}
// ✅ 关键步骤：设置状态 + 触发事件
checkbox.checked = true;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
}⚠️ 注意事项：
- bubbles: true 确保事件能冒泡至父级监听器（如表单级验证逻辑），多数场景必需；
- 若页面使用 input 事件监听（少见但存在），可额外补发 new Event('input', { bubbles: true })；
- 避免对已勾选的 checkbox 重复触发事件（可加 if (!checkbox.checked) 判断，提升健壮性）；
- WebSocket 报错（如 WebSocket connection to xyz.example.com failed）与勾选逻辑无关，属独立后台连接问题，不影响本方案有效性。
? 进阶建议：若目标页面使用 React/Vue/Angular，且上述方法仍无效，说明其采用更严格的受控组件模式——此时需模拟用户真实交互（如 checkbox.click()），而非直接修改属性：
立即学习“Java免费学习笔记（深入）”；
// 替代方案：触发原生 click（兼容性更强）
if (!checkbox.disabled && !checkbox.readOnly) {
checkbox.click(); // 自动触发 change + 更新状态
}总结：DOM 属性赋值 ≠ 用户交互。要让表单逻辑“看见”你的操作，必须显式触发语义化事件。dispatchEvent(new Event('change', { bubbles: true })) 是解决“勾了却没用”问题的标准且可靠方案。
