3. CSS 样式影响交互

使用自定义样式时，可能会影响 radio 的默认行为。例如，通过 CSS 隐藏原生 radio 按钮并用自定义按钮替代时，必须手动绑定点击事件和状态变化，否则可能出现无法选中或重复选中的情况。

4. JavaScript 逻辑冲突

如果页面中有 JavaScript 控制 radio 的选中状态，需确保逻辑不与浏览器默认行为冲突。比如，避免在 click 事件中直接修改 `checked` 属性，而应使用 `addEventListener` 进行监听和控制。

三、解决方法示例

```html

男

女

其他

```

```javascript

// 示例：使用 JS 控制 radio 选中

document.querySelectorAll('input[type="radio"]').forEach(radio => {

radio.addEventListener('click', function () {

document.querySelectorAll('input[type="radio"]').forEach(r => {

r.checked = false;

});

this.checked = true;

});

});

```

四、总结

“多个 radio 点击只能选中一个”是 radio 按钮的默认行为，但若出现异常，通常是由于以下原因：

- `name` 属性未统一；

- HTML 结构错误；

- CSS 样式干扰；

- JavaScript 逻辑冲突。

通过检查这些方面，可以有效解决 radio 按钮的单选问题，确保用户体验流畅。