在Web表单开发中，经常需要让页面打开时就自动选中某个单选按钮，例如记住用户上一次的选择，或者根据业务规则预置一个默认项。纯HTML的checked属性只能写死默认值，无法根据动态条件判断。借助JavaScript，我们可以在页面加载完成后灵活地控制哪一个radio被选中。
为什么不能直接在head里写选中代码
很多初学者会把操作单选按钮的脚本放在<head>标签中，结果刷新页面发现根本没有选中。这是因为浏览器自上而下解析HTML，当head中的脚本执行时，body里的<input type="radio">还没有被创建，document对象里根本找不到这些节点，自然无法设置checked属性。
要解决这个问题，核心思路是等待DOM构建完毕再执行脚本。浏览器提供了多种时机通知，例如load事件会在所有资源（图片、样式表等）加载完后触发，而DOMContentLoaded只在HTML解析完成、DOM树可用时触发，后者更适合操作表单元素，能更早完成选中动作且不受外部资源阻塞。
使用DOMContentLoaded实现自动选中
最规范的做法是监听DOMContentLoaded事件，在回调中获取目标单选按钮并赋值checked为true。下面的例子中有三个同名单选按钮，我们根据某个变量的值决定选中第二项。
document.addEventListener('DOMContentLoaded', function () {
// 假设从接口或存储中得到的默认值
var defaultValue = 'b';
// 获取所有name为gender的单选按钮
var radios = document.querySelectorAll('input[name="gender"]');
radios.forEach(function (item) {
if (item.value === defaultValue) {
item.checked = true;
}
});
});
这段代码先等待DOM就绪，再用querySelectorAll选中一组radio，通过遍历比对value来设置选中状态。这种写法不依赖脚本位置，即便放在head中也安全可靠。如果页面单选按钮很多，建议用更精确的ID或data属性定位，减少遍历开销。
相比直接写死HTML的checked，这种方式的优势在于逻辑可动态化。比如可以从localStorage读取用户偏好，或者根据URL参数切换默认项，而不用改动页面结构。缺点是若DOMContentLoaded之前用户已看到未选中状态，可能会有极短暂的闪烁，不过对单选按钮来说影响很小。
将脚本放在body末尾的简化方案
如果不想写事件监听，也可以利用浏览器解析顺序：把JavaScript放在</body>之前。此时所有DOM节点都已存在，脚本可直接执行，不必等待事件。
<form>
<input type="radio" name="gender" value="a">男
<input type="radio" name="gender" value="b">女
<input type="radio" name="gender" value="c">其他
</form>
<script>
var radios = document.getElementsByName('gender');
for (var i = 0; i < radios.length; i++) {
if (radios[i].value === 'c') {
radios[i].checked = true;
break;
}
}
</script>
上面的HTML中，script标签位于form之后，getElementsByName能立即拿到节点。使用for循环而非forEach，是为了兼容老旧浏览器。这种写法结构直观，但把逻辑和标记混在一起，不利于维护大型项目。
从工程化角度，推荐统一使用DOMContentLoaded或把脚本设为defer属性。defer会让脚本在文档解析后、DOMContentLoaded前执行，同样能安全操作元素，且保持head中引用的整洁。例如<script src="init.js" defer></script>即可。
常见误区与注意事项
一个容易踩的坑是同时给多个同名radio设置checked为true。由于单选按钮组内只能有一个选中，浏览器会保留最后一个生效的赋值。因此遍历时一定要用条件判断，确保只选中一个，或者在选中后break退出循环。
另外，如果页面中存在框架或异步加载的内容，主文档的DOMContentLoaded触发时那些动态插入的单选按钮可能还未生成。此时需要把选中逻辑放在对应异步回调里，或改用事件委托与MutationObserver监听节点变化，才能保证自动选中不失效。
| 方案 | 适用场景 | 主要优点 |
|---|---|---|
| DOMContentLoaded监听 | 脚本在head或外部文件 | 位置无关，规范可靠 |
| body末尾脚本 | 简单页面，快速实现 | 无需事件，代码直观 |
| defer脚本 | 模块化、可维护项目 | 保持结构清晰，自动延时 |
通过上述几种方式，开发者可以轻松用JavaScript在页面加载后自动选中单选按钮。根据项目复杂度选择对应方案，既能提升用户体验，也避免表单提交时因未选项产生的校验错误。
JavaScriptradio_buttonpage_load修改时间：2026-08-06 03:51:24