本文介绍如何通过原生 javascript 监听单选按钮（radio）的选择变化，自动重定向至对应 value 值指定的本地 html 文件，无需表单提交，简洁高效、兼容性好。

本文介绍如何通过原生 javascript 监听单选按钮（radio）的选择变化，自动重定向至对应 value 值指定的本地 html 文件，无需表单提交，简洁高效、兼容性好。

在构建多角色注册或登录流程的静态网站时，常需根据用户选择（如“客户”“服务提供者”“管理员”）跳转至不同 HTML 页面。此时若依赖表单提交 + jQuery，不仅引入额外依赖，还易因 DOM 加载时机、事件绑定方式不当导致失效。更优解是采用原生 JavaScript 的 change 事件监听——它精准响应用户最终选择，避免 click 误触发，并天然支持动态添加的 radio 元素。

以下为完整、可直接运行的实现方案：

<input type="radio" name="userType" value="signup-customer.html"> Client<br>
<input type="radio" name="userType" value="signup-provider.html"> Provider<br>
<input type="radio" name="userType" value="signup-supervisor.html"> Supervisor<br>

<script>
  // 获取所有 type="radio" 的 input 元素
  const radioInputs = document.querySelectorAll('input[type="radio"][name="userType"]');

  // 为每个单选按钮绑定 change 事件
  radioInputs.forEach(radio => {
    radio.addEventListener('change', function() {
      if (this.checked) {
        window.location.href = this.value;
      }
    });
  });
</script>

✅ 关键说明与最佳实践：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 使用 change 而非 click：change 仅在选项真正被选中（且失去焦点或显式触发）时触发，语义更准确，避免重复跳转；
• 精确筛选目标元素：querySelectorAll('input[type="radio"][name="userType"]') 确保只作用于本组单选按钮，不影响页面其他 radio；
• 显式判断 this.checked：防止在多选场景下意外触发（尽管同名 radio 天然互斥，但此检查增强健壮性）；
• 注意路径有效性：所有 value 值（如 "signup-customer.html"）必须为相对或绝对路径，且目标 HTML 文件需真实存在于同一服务器/本地目录下；若在本地双击 HTML 运行（file:// 协议），部分浏览器会因安全策略阻止跳转，建议使用本地服务器（如 VS Code Live Server 插件）测试；
• 无需
  标签：本方案完全脱离表单结构，简化 DOM，降低耦合度。

该方法轻量、可靠、零依赖，适用于任何现代浏览器（Chrome、Firefox、Edge、Safari ≥ 12），是静态站点路由跳转的推荐实现方式。

立即学习“Java免费学习笔记（深入）”；