如何累加单选按钮的data-price属性值并插入隐藏输入框？脚本合并方案咨询

你完全不需要分开两段脚本，反而应该把它们合并——因为第二段脚本存在逻辑错误，而且两段脚本都监听了radio的change事件，容易导致冲突和结果不一致。

问题分析 #

你的第二段脚本有两个关键问题：

• $(this).find('input[type=radio]:checked') 是错误的：this 指向当前触发change的单选按钮，它本身就是单个元素，没有子radio元素，因此找不到任何选中项，自然无法赋值给隐藏输入框。
• 这段脚本没有实现求和逻辑，只是尝试获取单个选中radio的data-price，和你第一段脚本的求和需求不匹配。

正确的合并方案 #

直接把赋值隐藏输入框的逻辑整合到你现有的calcPrice函数里即可，这样一次计算就能同时完成span显示和隐藏输入框赋值，逻辑统一且不会冲突。

修改后的完整脚本如下：

function calcPrice() {
  var price = 0;
  $("input[type=radio][data-price]:checked").each(function(i, el) {
    price += +$(el).data("price");
  });
  $("#price").text(price);
  // 新增这行代码，将求和结果赋值给隐藏输入框
  $("#hiddenprice").val(price);
}
$("input[type=radio]").on("change", calcPrice);
calcPrice();

为什么这样有效？ #

1. 保留了你原本正确的求和逻辑：遍历所有选中的带data-price属性的radio，累加价格。
2. 在计算完成后，同时更新#price span的显示文本和#hiddenprice隐藏输入框的value属性，确保两者值完全同步。
3. 只保留一个change事件监听，避免重复触发和逻辑混乱。

你只需要删除那段无效的第二段脚本，替换成上面的代码就可以解决问题了。

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