如何在Qt Designer中将单选按钮分为两个独立选择组？

问题原因 #

HTML原生单选按钮<input type="radio">依靠name属性判断分组，所有name属性值相同的单选按钮会被归为同一个选择组，同一时间整组仅能选中一个选项。你当前所有单选按钮互斥，就是因为全部设置了相同的name值。

实现方案 #

给性别、年级两个选择组的单选按钮分别设置不同的name属性即可，两组选择完全独立互不影响。

代码示例 #

<!-- 性别组：所有单选按钮name统一为gender -->
<div class="gender-group">
  <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="unknown"> 不愿透露</label>
</div>

<!-- 年级组：所有单选按钮name统一为grade -->
<div class="grade-group">
  <label><input type="radio" name="grade" value="g1"> 一年级</label>
  <label><input type="radio" name="grade" value="g2"> 二年级</label>
  <label><input type="radio" name="grade" value="g3"> 三年级</label>
  <!-- 其余年级选项同理配置即可 -->
</div>

提示：name属性值同时会作为表单提交时的字段名，可根据实际业务需求调整命名。

组件库适配说明 #

如果你使用的是UI组件库的单选组件，通用适配逻辑如下：

• Element UI / Element Plus：使用<el-radio-group>标签分别包裹性别、年级的单选选项，不同组绑定不同的v-model变量即可
• Ant Design / Ant Design Vue：使用<Radio.Group>标签分别包裹两组选项，不同组绑定不同的状态值即可
• 其他组件库：查阅官方文档的单选分组相关说明，本质都是通过区分不同的分组标识实现独立选择

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