用两个同name的radio实现发票类型切换，value须为英文如"electronic"/"paper"，label包裹文字或for/id关联，监听change事件获取checked.value，移动端需隐藏原生控件并扩大label热区。

怎么用 <input type="radio"> 实现发票类型切换

直接用两个 <input type="radio"> 绑定同一个 name，就能天然互斥——选“电子发票”时，“纸质发票”自动取消。不用 JS 也能跑通基础逻辑。

• 必须给两个 radio 设置相同的 name 值（比如 name="invoiceType"），否则它们不构成一组单选
• 推荐加上 value：电子发票用 value="electronic"，纸质用 value="paper"，后端或 JS 拿值才清晰
• 别漏掉 <label> 包裹文字，否则点击文字无法触发选择；或者用 for 和 id 关联（更稳妥）
• 默认选中用 checked 属性，但只加在一个上，加两个会出 bug

为什么 value 不能写中文或空格

后端接收、JS 判断、表单序列化（如 form.serialize()）都依赖 value 是合法字符串。中文或空格容易在 URL 编码、JSON 解析、数据库字段匹配时出问题。

• 错误写法：value="电子发票" → 可能变成 invoiceType=%E7%94%B5%E5%AD%90%E5%8F%91%E7%A5%A8，后端还得 decode
• 推荐写法：value="electronic" 或 value="paper"，简洁、可读、无编码风险
• 显示文案仍用中文写在 <label> 里，语义和体验都不受影响

切换后怎么拿到当前选中的发票类型

如果需要 JS 响应切换（比如显示不同输入框），监听 change 事件比 click 更可靠——它只在真正选中变化时触发。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 用 document.querySelector('input[name="invoiceType"]:checked') 获取当前选中项，注意加 :checked 伪类
• 取值用 .value，不是 .textContent 或 .innerText
• 没选中时上面的 querySelector 返回 null，记得判空，否则 .value 报 Cannot read property 'value' of null
• 示例：

  document.querySelectorAll('input[name="invoiceType"]').forEach(radio => {
    radio.addEventListener('change', () => {
      const selected = document.querySelector('input[name="invoiceType"]:checked');
      if (selected) console.log(selected.value); // 输出 'electronic' 或 'paper'
    });
  });

移动端点不中、样式错位的常见原因

radio 默认样式在 iOS 和部分安卓浏览器里非常小，用户手指点不中，或者被其他元素遮挡，本质是点击热区太小。

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

• 别只改 <input> 的 width/height，它不响应 CSS 尺寸控制；要靠隐藏原生控件 + 自定义 <label> 样式来扩大热区
• 常见翻车点：用 display: none 隐藏 input 后，忘了给 label 加 cursor: pointer，用户看不出可点
• 更稳的做法是用 opacity: 0 + position: absolute 覆盖在自定义按钮上，保留可访问性
• 测试时真机点一点，别只看 Chrome DevTools 的模拟器

实际开发中，最常被跳过的其实是「没设 name」和「没处理 null 情况」，这两处一出错，整个切换逻辑就静默失效，连控制台都不报错。