技术咨询：如何实现表单中两组单选按钮各选一项？

你其实已经找对了核心方向——用name属性给单选按钮分组，同一组的单选按钮共享同一个name值，浏览器就会自动让它们互斥（同一时间只能选一个）。不过你的代码里有个小问题会导致功能异常，我帮你修正并优化一下：

问题所在 #

你重复使用了defaultInline1、defaultInline2这些id值，HTML要求页面上的每个元素id必须唯一，重复的id会让label无法正确关联单选按钮，点击标签可能不会触发选中状态。

修正后的完整代码 #

<form method="POST" action="/profiles/adminKaLogin/">
    <!-- 第一组：供应商选择 -->
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input" id="vendor-option-1" name="vendor" value="1">
        <label class="custom-control-label" for="vendor-option-1">Vendor 1</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input" id="vendor-option-2" name="vendor" value="2">
        <label class="custom-control-label" for="vendor-option-2">Vendor 2</label>
    </div>

    <h3> Select time period</h3>
    <!-- 第二组：时间周期选择 -->
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input" id="period-option-1m" name="time_period" value="1m">
        <label class="custom-control-label" for="period-option-1m">1 Month</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input" id="period-option-2m" name="time_period" value="2m">
        <label class="custom-control-label" for="period-option-2m">2 Months</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input" id="period-option-6m" name="time_period" value="6m">
        <label class="custom-control-label" for="period-option-6m">6 Months</label>
    </div>

    <button type="submit" class="btn btn-primary" name="form1">Submit</button>
</form>

关键修改说明 #

• 唯一id：给每个单选按钮设置了独一无二的id，比如vendor-option-1、period-option-1m，确保label和单选按钮的关联完全正常。
• 语义化name：把原来的inlineDefaultRadiosExample改成了vendor，inlineDefaultRadiosExample1改成了time_period，后端接收参数时一眼就能知道对应哪个选项，更易维护。
• 保留原有样式：完全保留了你用的Bootstrap自定义单选按钮样式，视觉效果和原来一致。

这样修改后，你就能独立从第一组选一个供应商，第二组选一个时间周期，提交表单后后端可以通过vendor和time_period这两个参数分别获取选中的值，完美满足你的需求。

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