javascript操作单选框需通过name分组，用document.queryselector('input[name="xxx"]:checked')?.value获取选中值，用!!document.queryselector('input[name="xxx"]:checked')判断是否选中，用document.queryselector('inputname="xxx"').checked=true设置选中项，并监听change事件响应变化。

在 JavaScript 中操作单选框（Radio）的关键是：单选框通常成组出现（name 相同），只能有一个被选中；获取/设置的是整个组中 被选中的那个元素 的状态，而不是单个控件的“独立”状态。

获取单选框组的选中值（value）

最常用且推荐的方式是使用 document.querySelector 查找当前被选中的 radio：

• 用选择器 input[name="groupName"]:checked 找到已选中的元素
• 再取它的 .value 属性；如果没选中，返回 null，需做空值判断

示例：

```js
const selectedValue = document.querySelector('input[name="gender"]:checked')?.value;
console.log(selectedValue); // "male" 或 "female" 或 undefined
```

获取单选框组的选中状态（是否已选）

其实“是否已选”就是看有没有元素匹配 :checked。可以直接检查查询结果是否存在：

• document.querySelector('input[name="color"]:checked') 返回元素对象 → 已选中
• 返回 null → 未选中任何一项

也可封装为布尔判断：

Wjs Uploading Video

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

下载

```js
const isAnySelected = !!document.querySelector('input[name="color"]:checked');
```

设置单选框组的选中项（通过 value 设置）

找到对应 value 的 radio 元素，将其 checked 属性设为 true：

• 先用 querySelector 定位目标元素：input[name="level"][value="advanced"]
• 再赋值 .checked = true（注意不是 .setAttribute('checked', '')）

示例：

```js
document.querySelector('input[name="level"][value="advanced"]').checked = true;
```

⚠️ 注意：若该 value 不存在，会报错，建议加存在性判断。

监听单选框变化（用户选择时触发）

给任意一个同 name 的 radio 添加 change 事件监听即可（因为一次只能选一个，变化必触发）：

• 推荐委托到父容器，或绑定到其中一个 radio 上
• 回调中用上面的方法获取当前选中值，避免重复取 DOM

示例：

```js
document.querySelectorAll('input[name="theme"]').forEach(radio => {
  radio.addEventListener('change', () => {
    const val = document.querySelector('input[name="theme"]:checked')?.value;
    console.log('主题已切换为：', val);
  });
});
```