如何通过 JavaScript 正确勾选复选框并确保表单提交生效-js教程

在 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 }));
}

⚠️ 注意事项：