jQuery单选按钮值求和按总和判断系数的代码问题排查

需求说明 #

同一div内放置了多组不同name属性的单选按钮，需要实现如下计算逻辑：

• 计算所有选中单选按钮的value值总和，例如0+1+6、1+1+2这类值组合
• 若总和 >= 3，将总和乘以3000作为最终结果
• 若总和 < 3，将总和乘以4000作为最终结果

问题排查 #

之前编写的复选框求和代码运行完全正常，可确认HTML结构、基础选中值获取、基础求和逻辑没有问题。
原有代码的逻辑错误：

遍历每个选中单选按钮时，单独判断当前单选框的value值是否>=3来选择相乘系数，而非先累加所有选中值得到总和后，再根据总和的大小选择对应系数计算最终结果，导致计算逻辑不符合需求。

原有代码参考 #

存在逻辑错误的jQuery代码 #

jQuery(function ($) { 
$('input[type=radio]').each(function(){
  $(this).change(calculate);
});

function calculate() {
  var result = 0;
  $('input[type=radio]:checked').each(function(){
      
      const val = Number($(this).val());
      result += val * (val >= 3 ? 3000 : 4000);

  });
  
  $("#result").html(result);
}

});

对应HTML结构代码 #

<div><label class="radio">
      <input type="radio" 
       name="one" value="0">
    </label>
 
<label class="radio">
      <input type="radio" 
       name="one" value="1">
    </label>
 
<label class="radio">
      <input type="radio" 
       name="two" value="1">
    </label>
 
<label class="radio">
      <input type="radio" 
       name="two" value="6">
    </label>
 
<label class="radio">
      <input type="radio" 
       name="three" value="2">
    </label>
 
<label class="radio">
      <input type="radio" 
       name="three" value="7">
    </label>
</div>
<span id="result">- </span>

正常运行的复选框参考代码 #

jQuery(function ($) { 
$('input[type=checkbox]').each(function(){
  $(this).change(calculate);
});

function calculate() {
  var result = 0;
  $('input[type=checkbox]:checked').each(function(){
      result += Number($(this).val()) * 3000;
  });
  
  $("#result").html(result);
}

});

修正后可正常运行的代码 #

jQuery(function ($) { 
  // 绑定单选按钮选中变化触发计算
  $('input[type=radio]').on('change', calculate);

  function calculate() {
    // 第一步：先统计所有选中单选框的value总和
    let totalValue = 0;
    $('input[type=radio]:checked').each(function(){
        totalValue += Number($(this).val());
    });
    // 第二步：根据总和匹配对应系数计算最终结果
    const finalResult = totalValue >= 3 ? totalValue * 3000 : totalValue * 4000;
    // 输出结果到页面
    $("#result").html(finalResult);
  }
});

内容的提问来源于stack exchange，提问作者Evgeniya-33