如何实现单选按钮互斥选择？遗忘对应属性寻求技术解答

要让同一组的单选按钮只能同时选中一个，核心是给所有相关的单选按钮设置相同的name属性值。浏览器会自动将拥有相同name的单选按钮归为一组，确保组内最多只有一个选项被选中。

示例代码 #

<!-- 性别选择组 -->
<label>
  <input type="radio" name="gender" value="male"> 男
</label>
<label>
  <input type="radio" name="gender" value="female"> 女
</label>
<label>
  <input type="radio" name="gender" value="other"> 其他
</label>

<!-- 独立的订阅选择组（使用不同name） -->
<label>
  <input type="radio" name="subscription" value="yes"> 订阅通知
</label>
<label>
  <input type="radio" name="subscription" value="no"> 不订阅
</label>

额外说明 #

• 如果需要默认选中某个选项，给对应的单选按钮添加checked属性即可：

  <input type="radio" name="gender" value="male" checked> 男
  

• 不同组的单选按钮必须使用不同的name值，避免组间互相干扰。

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