使用jQuery计算两个表单输入值的求和优化方案咨询

Hey Ashonko，你的代码确实存在重复逻辑，而且还没正确实现Level 1和Level 2分数相加的需求——原来的代码会因为多个if判断覆盖Score的值，最终只显示最后一个选中单选框的分数，而不是两组的总和。咱们来重构一下，让代码更简洁优雅，同时完美满足需求：

核心改进思路 #

• 抛弃逐个判断id的冗余逻辑，利用单选框的name属性分组，直接获取每组选中的元素
• 封装计算逻辑为可复用函数，避免代码重复
• 精准监听事件，提升性能
• 修复HTML里的小bug（Level 2第一个label的for属性错误）

完整优化代码 #

HTML（修正了label的for属性） #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form>
    Level One:<br>
    <input type="radio" name="first" id="1" value="1" checked="checked" />
    <label for="1">1</label>
    <input type="radio" name="first" id="2" value="2" />
    <label for="2">2</label>
    <input type="radio" name="first" id="3" value="3" />
    <label for="3">3</label>
    <input type="radio" name="first" id="4" value="4" />
    <label for="4">4</label>
  </form>
  <form>
    Level Two:<br>
    <input type="radio" name="second" id="5" value="5" checked="checked" />
    <label for="5">5</label> <!-- 修正了for属性，原来的"small"改为"5" -->
    <input type="radio" name="second" id="6" value="6" />
    <label for="6">6</label>
    <input type="radio" name="second" id="7" value="7" />
    <label for="7">7</label>
    <input type="radio" name="second" id="8" value="8" />
    <label for="8">8</label>
  </form>
</div>
<div class="container">
  <label>Result:</label>
  <div id="score"></div>
</div>

CSS（保留原有样式，无需修改） #

form {
  position: relative;
  top: 100px;
  left: 100px;
  background: -webkit-linear-gradient(bottom,#eaeaea, #fafafa);
  padding: 10px;
  display: inline-block;
  box-shadow: 0 1px 1px rgba(0,0,0,.65);
  border-radius: 3px;
  border: solid 1px #ddd;
}
input {
  display: none;
}
input:checked + label {
  background: -webkit-linear-gradient(top,#4D90FE,#4787ED);
  border: solid 1px rgba(0,0,0,.15);
  color: white;
  box-shadow: 0 1px 1px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1) inset;
  text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}
label {
  font-family: helvetica;
  cursor: pointer;
  display: inline-block;
  border: solid 1px transparent;
  margin-right: 2px;
  width: 50px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 3px;
}
label:last-child {
  margin-right: 0;
}
label:hover {
  background: rgba(77, 144, 254, .5);
  border: solid 1px rgba(0,0,0,.15);
}

JavaScript（大幅简化，逻辑清晰） #

$(document).ready(function() {
  // 封装计算总分的复用函数
  function calculateTotalScore() {
    // 获取Level 1选中的分数，转数字，兜底默认0
    const level1Score = parseInt($('input[name="first"]:checked').val()) || 0;
    // 获取Level 2选中的分数，转数字，兜底默认0
    const level2Score = parseInt($('input[name="second"]:checked').val()) || 0;
    // 计算总和并渲染到页面
    $('#score').text(level1Score + level2Score);
  }

  // 监听两组单选框的change事件，触发计算
  $('input[name="first"], input[name="second"]').on('change', calculateTotalScore);

  // 页面初始化时自动计算一次，确保初始值正确显示
  calculateTotalScore();
});

代码优化细节说明 #

1. 复用性提升：把计算逻辑封装成函数，不管是页面初始化还是单选框变化，都能调用同一个函数，避免重复代码。
2. 适配性增强：通过name属性分组获取选中项，哪怕后续新增更多单选框选项，代码也不需要修改，自动适配。
3. 健壮性保障：用parseInt转换字符串值为数字，加上|| 0处理极端情况（比如没有选中项时不会出现NaN）。
4. 性能优化：只监听需要的单选框的change事件，比监听整个document的input事件更高效，减少不必要的触发。

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