为何HTML单选按钮可多选？原因分析与解决方法

哦，这问题我碰到过好多次啦！你现在的radio按钮能同时选多个，核心原因就是它们的name属性不相同。

浏览器对radio按钮的分组逻辑是：只有拥有相同name属性值的radio才会被归为同一组，同一组内的radio才会互斥（只能选一个）。你看你写的代码里，两个radio分别用了name="nameA"和name="nameB"，这就相当于把它们分成了完全独立的两组，自然可以同时选中啦。

先看看你原来的代码：

<input type="radio" name="nameA" id="nameA" value="nameA"> <label for="nameA">Choice A</label> 
<input type="radio" name="nameB" id="nameB" value="nameB"> <label for="nameB">Choice B</label>

解决方案 #

把所有需要互斥选择的radio按钮设置成相同的name属性值就可以了，id和label的for属性保持对应就行，不影响分组。修正后的示例代码如下：

<input type="radio" name="sameName" id="nameA" value="nameA"> <label for="nameA">Choice A</label> 
<input type="radio" name="sameName" id="nameB" value="nameB"> <label for="nameB">Choice B</label>

这样调整之后，两个radio就会被归为同一组，你就只能选中其中一个啦～

内容的提问来源于stack exchange，提问作者t3ax