HTML单选按钮组怎么动态改变默认选中项-html教程-PHP中文网

checked属性决定单选按钮默认选中项，存在即选中；动态设置需手动取消同name其他项的checked，并在dom加载后执行；框架中应更新数据状态而非直接操作dom属性。

html单选按钮组怎么动态改变默认选中项

用 `checked` 属性控制哪个单选按钮默认选中

HTML 单选按钮组（<input type="radio">）的默认选中项由 checked 属性决定，不是靠 value 或 name 推导出来的。只要某个 <input> 元素上存在 checked 属性（哪怕写成 checked="" 或 checked="false"），它就会被选中——浏览器只看属性是否存在，不看值。

所以动态改默认选中项，本质就是：移除旧选项的 checked 属性，给新选项加上该属性。

手动操作 DOM 时，用 element.checked = true 比 element.setAttribute('checked', '') 更可靠（后者在某些旧浏览器可能不触发 UI 更新）
如果用 JS 初始化页面，默认选中逻辑应放在 DOM 加载完成后执行，避免查找不到元素
同一组单选按钮必须有相同的 name 值，否则它们不会互斥，checked 行为也会失效

JS 动态设置时别漏掉「取消其他同名 radio 的 checked」

单选组里只能有一个被选中，但 JS 不会自动帮你取消其他项的 checked 状态。如果你只对目标元素设 checked = true，而没手动清除同 name 的其他项，可能出现多个同时“选中”的假象（尤其在表单重置或多次调用后）。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

推荐写法：

function selectRadioByName(name, value) {
  const radios = document.querySelectorAll(`input[type="radio"][name="${name}"]`);
  radios.forEach(radio => {
    radio.checked = (radio.value === value);
  });
}

这个函数确保每次只一个生效，不用手动维护“上一个选中项”
注意 querySelectorAll 返回的是静态 NodeList，适合遍历；用 getElementsByName 返回 HTMLCollection，但需转数组才能用 forEach
如果 value 是空字符串或数字类型，注意用严格相等（===），避免 "1" == 1 导致误匹配