JavaScript或jQuery中如何给多个input绑定keyup事件实现费用计算？

问题原因 #

你的事件绑定失效核心是jQuery多元素选择器用法错误：
jQuery多元素选择器要求所有选择符放在同一个字符串参数内，用英文逗号分隔，而你拆成了多个独立参数，jQuery会把第二个及之后的参数识别为「上下文选择范围」，而非目标元素，自然无法正确绑定事件。

除此之外你的代码还有几个隐藏问题：

• 代码中参与计算的amount变量未定义，直接使用会得到NaN导致计算失败
• 输入框为空时parseFloat返回NaN，会直接让整条计算逻辑失效
• 原生DOM方法和jQuery混用可以进一步简化，减少冗余代码

修正后代码 #

// 所有选择器合并为同一个字符串
$('#tripfuel, #cardfee, #loadrepair, #shoprepair, #truckrent, #comcheck, #advance, #othercharge').on('keyup', function () {
    // 统一处理取值逻辑，空值默认转为0避免NaN
    const getInputVal = id => parseFloat($(id).val()) || 0;
    // 补充你自己的amount变量定义，比如是对应输入框的值就替换为实际ID
    const amount = getInputVal('#你的amount字段对应输入框ID');
    const fuel = getInputVal('#tripfuel');
    const cardfee = getInputVal('#cardfee');
    const onloadrepair = getInputVal('#loadrepair');
    const shoprepair = getInputVal('#shoprepair');
    const trailerrent = getInputVal('#truckrent');
    const comcheck = getInputVal('#comcheck');
    const advance = getInputVal('#advance');
    const miscellenous = getInputVal('#othercharge');

    const expense = amount - fuel - cardfee - onloadrepair - shoprepair - trailerrent - comcheck - advance - miscellenous;
    console.log("Total Expense : || " + expense); 
    $('#totalamount').val(expense.toFixed(2));
});

动态元素适配 #

如果你要绑定的输入框是页面加载完成后动态生成的，需要改用事件委托的方式绑定，避免动态元素无法触发事件：

// 把document替换为页面上最早加载完成的、包含这些输入框的父容器，性能更好
$(document).on('keyup', '#tripfuel, #cardfee, #loadrepair, #shoprepair, #truckrent, #comcheck, #advance, #othercharge', function () {
    // 计算逻辑和上面保持一致即可
});

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