如何对不同输入类型的data-price属性值求和？

嘿，我帮你找出问题所在啦！你的代码里有几个关键小失误，导致实时计算总价的功能没生效，咱们一步步来修正：

问题分析： #

• 选择器语法错误：你写的 $('#go','#place') 不符合jQuery选择器规则，多个元素选择器应该放在同一个字符串里用逗号分隔（也就是 $('#go, #place')），否则第二个参数会被当作查找上下文，不是你想要的同时选中两个区域。
• Radio按钮选中判断错误：单选按钮的选中状态要用:checked伪类匹配，而:selected是专门给下拉菜单<option>用的，你之前统一用:selected，导致选中的radio完全没被捕获到。
• 元素遍历逻辑不对：#go里的radio嵌套在<label>里的<input>中，直接用children()找不到，得用find()递归查找；而且要区分radio组和下拉框的选中项，不能用同一个逻辑处理。

修正后的完整代码： #

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="form-style.css" rel="stylesheet" />
</head>
<body>
<form id="form1">
<div id="go">
<label>
<input type="radio" name="colorRadio" value="one" class="abc" data-price="1600"/>Live Band
</label>
<label>
<input type="radio" name="colorRadio" value="two" class="abc" data-price="400"/>DJ
</label>
<label>
<input type="radio" name="colorRadio" value="three" class="abc" data-price="500"/>Acoustic
</label>
</div>
<div id="example" class="container">
<select id="place">
<option value="">pick</option>
<option value="a" data-price="100">a</option>
<option value="b" data-price="200">b</option>
<option value="c" data-price="300">c</option>
</select>
</div>
</form>
<div id="result" class="container"></div>
<script>
$(document).ready(function(){
function validate(){
var sum = 0;
// 处理单选按钮的选中项
var selectedRadio = $('#go').find('input[type="radio"]:checked');
if(selectedRadio.length > 0){
sum += parseInt(selectedRadio.data('price')) || 0;
}
// 处理下拉框的选中项
var selectedOption = $('#place option:selected');
if(selectedOption.data('price')){
sum += parseInt(selectedOption.data('price')) || 0;
}
// 更新结果显示
$('#result').html(sum === 0 ? '' : sum +'$');
}
validate();
// 监听单选按钮组和下拉框的变化事件
$('#go input[type="radio"], #place').on('change',function(){
validate();
});
});
</script>
</body>
</html>

关键修改说明： #

1. 拆分了radio和下拉框的处理逻辑，分别用:checked和:selected匹配选中项，避免规则混淆。
2. 用find()查找#go里的选中radio，确保能正确获取到嵌套的input元素。
3. 把事件监听对象改成#go input[type="radio"]，只有当单选按钮被点击时才触发计算，逻辑更精准。
4. 用parseInt()确保data-price的数值被正确转换成数字类型，避免出现字符串拼接的错误。

现在测试一下，不管选radio还是下拉框，总价都会实时更新啦！

内容的提问来源于stack exchange，提问作者Daniel Gracie Cheng