删除单选按钮前必须确认name属性一致,因浏览器仅允许同名组内单选;删错name或误删会导致选中异常,需用querySelectorAll精确获取目标组,删后手动处理checked状态迁移。

删除单选按钮前必须确认 name 属性一致
HTML 单选按钮(<input type="radio">)靠 name 属性组成逻辑组,浏览器只允许同名组内选中一个。动态删除某个选项时,如果删错了 name 不匹配的元素,或误删了其他组的 radio,会导致选中状态异常甚至整个组失效。
实操要点:
- 用
document.querySelectorAll('input[type="radio"][name="yourGroupName"]')精确获取目标组所有 radio,避免污染其他组 - 不要只靠
id或顺序索引删除——用户可能已选中某一项,删掉它后checked状态不会自动转移到剩下项上,组会“变空” - 如果要保留选中态,得先记录当前
checked的value,再删目标项,最后手动设回剩余项中匹配的那一个
用 remove() 删除 DOM 节点最直接
现代浏览器支持原生 remove() 方法,比 parentNode.removeChild() 更简洁,也无需关心父节点引用是否还有效。
示例:删掉 value 为 "option2" 的 radio
const target = document.querySelector('input[type="radio"][name="choice"][value="option2"]');
if (target) {
target.remove();
}
注意:
-
querySelector只返回第一个匹配项,确保 value 唯一;若存在重复 value,要用querySelectorAll配合循环 - 删除后,该 radio 的
checked状态彻底丢失,不会“转移”——这是预期行为,不是 bug - IE 不支持
remove(),如需兼容,改用target.parentNode.removeChild(target)
删完后选中态不恢复?需要手动干预
单选组里删掉当前选中的项,浏览器不会自动选中剩下的任意一个。页面逻辑上可能期望“保持有且仅有一个选中”,这就得自己补逻辑。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
常见做法:
- 删之前缓存
document.querySelector('input[name="choice"]:checked')?.value - 删完遍历剩余 radio:
document.querySelectorAll('input[name="choice"]'),找到第一个 value 匹配的并设checked = true - 如果没有匹配项(比如删的是唯一选项,或缓存值已不存在),可设默认项,或清空选中态:
document.querySelector('input[name="choice"]')?.checked = false
这步漏掉,用户会发现“点了提交却没选中任何项”,尤其在表单校验场景下容易出问题。
用 disabled 替代删除更安全?看场景
如果目标只是禁用某个选项(比如后台动态控制可见性),而不是真从 DOM 移除,用 disabled 更稳妥:
document.querySelector('input[name="choice"][value="option3"]').disabled = true;
优势:
- 不破坏 DOM 结构,不影响事件委托或 CSS 选择器稳定性
- 选中态保留(即使被禁用,仍显示为 checked)
- 表单提交时
disabled的 radio 不会发往服务器,效果接近删除
但注意:disabled 元素无法获得焦点、不能响应 click,也不参与 :checked 伪类样式——如果你依赖这些,就得走真实删除。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










