如何创建多组互相独立可分别选择的HTML radio单选框

问题根源 #

HTML 中单选框（input[type="radio"]）的分组逻辑和换行、排版标签无关，完全由name属性决定：所有name属性值完全相同的单选框会被识别为同一组，同一组内同一时间只能选中一个选项。你遇到的问题就是两组单选框都用了相同的name属性，或者未显式设置name属性，被默认归为了同一全局组。

解决方法 #

给两组单选框分别设置不同的name值即可，同一组内的单选框name值保持一致。正确实现示例如下：

<!-- 第一组：是非题，统一设置name为yes_no -->
<div>
  <p>1. 是非题</p>
  <label><input type="radio" name="yes_no" value="yes"> 是</label>
  <label><input type="radio" name="yes_no" value="no"> 否</label>
</div>
<br>
<!-- 第二组：性别题，统一设置name为gender -->
<div>
  <p>2. 性别题</p>
  <label><input type="radio" name="gender" value="male"> 男</label>
  <label><input type="radio" name="gender" value="female"> 女</label>
</div>

补充说明 #

• 配合label标签使用可以实现点击选项文字就选中对应单选框的效果，无需精准点击圆形选择框，体验更好
• 表单提交时，会自动提交选中单选框的value值，对应的键名就是单选框的name值

内容的提问来源于stack exchange，提问作者Duc Quang Bui