HTML单选按钮组怎么用JS读取选中状态-html教程-PHP中文网

用 document.queryselector('input[name="gender"]:checked') 可获取选中单选按钮元素，未选中时返回 null，需判空后取 value；表单 reset() 后 js 属性 .checked 不同步，应重新查询或用 form.elements 访问。

html单选按钮组怎么用js读取选中状态

怎么用 `document.querySelector` 拿到选中的单选按钮值

单选按钮组（<input type="radio">）本身没有“整体状态”，JS 只能查某个具体按钮是否被选中，或者遍历找那个 checked 为 true 的。最常用也最稳妥的方式是用 document.querySelector 配合属性选择器：

写法：document.querySelector('input[name="gender"]:checked') —— 注意必须带 name 属性，且所有同组 radio 的 name 值要完全一致
如果没选中任何项，返回 null，直接取 .value 会报 Cannot read property 'value' of null
安全读值写法：const el = document.querySelector('input[name="gender"]:checked'); const val = el ? el.value : '';

`getElementsByName` 遍历时为什么总拿不到 checked 项

很多人习惯用 document.getElementsByName('xxx') 拿 NodeList，再 for 循环判断 .checked，但容易漏掉两个关键点：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

返回的是 HTMLCollection（不是数组），不能直接用 .find() 或 .forEach()，得先转数组或用传统 for 循环
循环里必须用 item(i).checked 或 [i].checked，写成 elements[i].checked 是对的，但写成 elements.checked 就完全无效

示例片段：

const radios = document.getElementsByName('level');
let val = '';
for (let i = 0; i

监听单选按钮变化该用 `change` 还是 `click`

用 change 事件更合理，原因很实际：

change 在用户真正切换选项后触发（包括空状态 → 选中、A → B），而 click 在每次点击都触发，哪怕点的是已选中的项
移动端存在 focus/blur 行为，click 可能误触发；change 更语义准确

绑定方式建议作用于父容器（如 <fieldset></fieldset>），用事件委托：

document.querySelector('#form-group').addEventListener('change', e => {
  if (e.target.name === 'category') {
    console.log(e.target.value);
  }
});

表单重置后 JS 读取的值为什么没更新

这是个隐蔽但高频的问题：调用 form.reset() 后，DOM 中的 checked 属性不会自动同步到 JS 属性（.checked），导致你用 querySelector 还拿到旧值。

根本原因：reset() 只还原表单控件的“初始值”（即 HTML 中写的 checked 属性），但 JS 属性（.checked）可能已被之前操作改写，不会被 reset 影响
验证方法：在控制台执行 document.querySelector('input[value="yes"]').hasAttribute('checked') 和 .checked，两者可能不一致
解决办法：重置后手动刷新引用，或统一用 form.elements.xxx 访问（它反映当前 DOM 状态）