HTML实现数据竖向排列及单选分组选值求和的布局方案

问题1：单选框全局互斥修复 #

• 核心原因是所有单选框<input type="radio">的name属性取值完全相同，浏览器默认同一name的单选框为同一组，全局只能选一个
• 修复方式：给两组单选框设置不同的name属性，比如offer rank组统一设为name="offer_rank"，salary组统一设为name="salary"

问题2：salary组选项每4个自动换行修复 #

推荐使用CSS Grid布局实现，兼容性好且规则简单，不需要手动计算宽度边距

• 给salary组的选项外层容器添加自定义类，比如salary-options
• 给该类设置Grid布局，指定每行展示4列即可

完整示例代码 #

HTML代码 #

<div class="container">
  <!-- offer rank 组 -->
  <div class="form-group">
    <h3>Offer Rank 选择</h3>
    <div class="offer-options">
      <label class="option-item">
        <input type="radio" name="offer_rank" value="10">  tier1 +10分
      </label>
      <label class="option-item">
        <input type="radio" name="offer_rank" value="8">  tier2 +8分
      </label>
      <label class="option-item">
        <input type="radio" name="offer_rank" value="6">  tier3 +6分
      </label>
      <label class="option-item">
        <input type="radio" name="offer_rank" value="4">  tier4 +4分
      </label>
    </div>
  </div>

  <!-- salary 组 -->
  <div class="form-group">
    <h3>Salary 选择</h3>
    <div class="salary-options">
      <label class="option-item">
        <input type="radio" name="salary" value="10">  30w+ +10分
      </label>
      <label class="option-item">
        <input type="radio" name="salary" value="9">  25-30w +9分
      </label>
      <label class="option-item">
        <input type="radio" name="salary" value="8">  20-25w +8分
      </label>
      <label class="option-item">
        <input type="radio" name="salary" value="7">  18-20w +7分
      </label>
      <label class="option-item">
        <input type="radio" name="salary" value="6">  15-18w +6分
      </label>
      <label class="option-item">
        <input type="radio" name="salary" value="5">  12-15w +5分
      </label>
      <label class="option-item">
        <input type="radio" name="salary" value="4">  10-12w +4分
      </label>
      <label class="option-item">
        <input type="radio" name="salary" value="3">  8-10w +3分
      </label>
      <!-- 可继续新增更多salary选项，会自动每4个换行 -->
    </div>
  </div>

  <!-- 总分展示 -->
  <div class="total-area">
    <p>当前总分：<span id="total">0</span></p>
  </div>
</div>

CSS代码 #

/* 公共样式 */
.form-group {
  margin-bottom: 24px;
}
.option-item {
  cursor: pointer;
}

/* offer组自定义布局，横向排列即可 */
.offer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

/* salary组每4个换行的核心样式 */
.salary-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 16px; /* 第一个值是行间距，第二个是列间距 */
}

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