无法获取第二组单选按钮值，计算仅生效第一组的技术求助

问题根源及修复方案 #

1. HTML结构错误

你写第二组单选按钮时，<div id="option2">刚开标签就直接闭合了(<div id="option2"></div>)，导致后面的单选按钮根本不在这个容器内，JS里针对#option2的选择器和事件监听自然失效。

2. JS选择器逻辑错误

第二组是单选按钮，你却用$('#option2 select')去查找下拉框，完全不对；另外变量price1没加var声明，会变成全局变量，容易引发意外问题。

3. 事件监听优化

可以简化事件绑定逻辑，直接给所有单选按钮绑定change事件，或者修正HTML后监听容器内的变化，代码更简洁可靠。

修正后的完整代码 #

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="option1">
  <input type="radio" class="form-radio-input" id="choice1" name="choicemodal1" value="0" checked data-price="0"><label for="choice1" class="width100">Preferred Customer</label>
  <input type="radio" class="form-radio-input" id="choice2" name="choicemodal1" value="1" data-price="1"><label for="choice2" class="width100">Not a Preferred Customer</label>
</div>
<hr>
<div id="option2">
  <input type="radio" class="form-radio-input" id="choice3" name="choicemodal2" value="0" checked data-price1="0"><label for="choice3" class="width100">Trusted Traveler</label>
  <input type="radio" class="form-radio-input" id="choice4" name="choicemodal2" value="0.15" data-price1="0.15"><label for="choice4" class="width100">Not a Trusted Traveler</label>
</div>

<br><br>
<div>Total shipping cost is:</div>
<div class="modlcstmtotal"></div>

JS部分

$(document).ready(function() {
  // 给所有单选按钮绑定change事件
  $('input[type="radio"]').on('change', update_total);

  function update_total() {
    var tot = 0;
    // 处理第一组单选按钮
    $('#option1 input:checked').each(function() {
      var price = parseFloat($(this).data('price'));
      if (!isNaN(price) && price >= 0) {
        tot += price;
      }
    });
    // 处理第二组单选按钮
    $('#option2 input:checked').each(function() {
      var price1 = parseFloat($(this).data('price1'));
      if (!isNaN(price1) && price1 >= 0) {
        tot += price1;
      }
    });
    $('.modlcstmtotal').html(tot.toFixed(2));
  }
  // 初始化计算
  update_total();
});

额外优化建议 #

• 统一data属性名，比如都用data-price，这样JS逻辑可以合并，不用分开处理price和price1
• 增加isNaN判断，避免非数字值导致计算错误
• 用事件委托写法$(document).on('change', 'input[type="radio"]', update_total)，后续动态添加单选按钮也能生效

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