【多个radio点击只能选中一个】在网页开发中，`` 是一种常用的表单元素，用于让用户从一组选项中选择一个。然而，在实际使用过程中，用户可能会遇到“多个 radio 点击只能选中一个”的问题，这通常与 HTML 的默认行为有关。
一、问题总结
| 问题描述 | 说明 |
| 多个 radio 点击只能选中一个 | 用户点击多个 radio 按钮时，只能有一个被选中，这是 HTML 的默认行为。 |
| 是否为错误？ | 不是错误，而是正常功能设计。 |
| 如何实现多选？ | 可以通过修改 `name` 属性或使用 JavaScript 实现多选逻辑。 |
二、原因分析
HTML 中的 `` 元素默认具有“互斥”特性，即同一组（`name` 属性相同）的 radio 按钮中，只能有一个被选中。这种机制是为了确保用户在一组选项中只能做出一个选择。
例如：
```html
男
女
```
在这段代码中，无论用户点击哪一个 radio 按钮，只有一个是被选中的。
三、解决方案
如果需要实现“多个 radio 可以同时选中”，可以采取以下方法：
方法一：更改 `name` 属性
将每个 radio 按钮设置不同的 `name` 属性，这样它们就不会被当作一组处理：
```html
A
B
```
这样，两个 radio 按钮可以独立选中。
方法二：使用 JavaScript 控制
通过 JavaScript 实现自定义逻辑，允许用户同时选中多个 radio 按钮：
```html
<script>
document.querySelectorAll('.multi-select').forEach(radio => {
radio.addEventListener('click', function() {
this.checked = !this.checked;
});
});
</script>
```
这种方法可以实现多选效果，但需要额外的逻辑支持。
四、总结
| 项目 | 内容 |
| 默认行为 | 同一组 radio 只能选中一个 |
| 是否可修改 | 可以通过调整 `name` 或使用 JS 实现多选 |
| 适用场景 | 需要多选时，建议使用 checkbox 而非 radio |
| 开发建议 | 根据业务需求选择合适的表单控件，避免误解用户意图 |
如需实现多选功能，建议优先考虑使用 ``，因为它天生支持多选，无需额外处理。而 radio 按钮更适合单选场景。