HTML单选按钮组怎么实现是否选项切换-html教程-PHP中文网

name相同才能互斥，因浏览器原生将同名radio归为一组，选中一个自动清空其余checked；联动时需监听change事件，禁用同时清除checked/selectedindex等值，避免提交残留。

html单选按钮组怎么实现是否选项切换

直接用 name 相同的两个 <input type="radio"> 就能实现“是否”二选一，不需要 JS 也能保证互斥；但若需联动其他控件（如启用/禁用后续字段），就得监听 change 事件并操作 disabled 属性。

为什么 name 相同才能互斥

浏览器原生行为：同一 name 值下的所有 radio 按钮自动组成一个互斥组。选中其中一个，其余同名 radio 的 checked 状态会被自动清空。这是 HTML 规范定义的行为，不依赖 JS。

必须写 name="yesno"（或任意一致值），不能漏、不能拼错大小写
value 必须不同，例如 value="yes" 和 value="no"，否则提交时无法区分选择
推荐加 <label></label> 包裹或用 for 绑定，提升点击热区和可访问性

如何监听是否切换并控制后续字段

常见场景是：“是否启用某功能” → 若选“否”，则禁用并清空下方配置项。关键点在于：仅设 disabled = true 不够，必须同时清除 checked，否则表单提交仍可能带上旧值。

anything-to-html

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

下载

监听 change 而非 click：确保用户通过键盘空格选中时也能触发
禁用时要同步执行 element.checked = false，尤其对 <input type="radio"> 和 <select></select>
避免用 style.display = 'none' 替代 disabled —— 它不影响表单提交，数据仍会发到后端

示例逻辑：

document.querySelectorAll('input[name="enableFeature"]').forEach(radio => {
  radio.addEventListener('change', () => {
    const configGroup = document.getElementById('featureConfig');
    if (radio.value === 'no') {
      configGroup.querySelectorAll('input, select, textarea').forEach(el => {
        el.disabled = true;
        if (el.type === 'radio' || el.type === 'checkbox') el.checked = false;
        else if (el.tagName === 'SELECT') el.selectedIndex = -1;
      });
    } else {
      configGroup.querySelectorAll('input, select, textarea').forEach(el => el.disabled = false);
    }
  });
});